Использование медиа-запросов css для адаптивного дизайна.


Для создания отзывчивого дизайна (адаптивного) можно использовать медиа-запросы в CSS3.

Для начала нам необходимо переключить браузер в более удобный для чтения режим, для этого используем метаэлемент viewport который размещаем в теге HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ну и собственно сам CSS с использованием медиа-запросов:

body { background: #ccc; } //цвет фона 
   @media only screen and (max-width : 500px) { 
   //в этой секции мы описываем свойства css 
   //которые будут применятся для экранов с ширеной 500px или менее.
     body { background: #fc0; }
   }

Список css медиа запросов (не полный):

  • min-width:100px - Минимальная ширина окна
  • max-width:35em - Максимальная ширина окна
  • max-device-width: 480px - Максимальная ширина устройства (в пикселях)
  • device-width: 768px - Ширина устройства
  • device-aspect-ratio: 9/16 - Соотношение сторон
  • orientation:landscape - Ландшафтная ориентация
  • orientation:portrait - Портретная ориентация
  • resolution: 96dpi - Плотность экрана
  • min-resolution: 192dpi - Минимальная плотность экрана
#CSS

Copyright © 2013-2017