CSS медиа-запросы (@media)

Медиа-запросы позволяют применить стили элементам в зависимости от типа устройства, а также позволяют задать дополнительные условия при истинности которых будут применены стили. В css медиа-запросы задаются так называемым @-правилом (At-Rules) @media.

Синтаксис:

@media Media Type {
  selector {
    // Styles
  }
}

Медиа Типы

В css есть 3 медиа типа:

screen - задает стили для устройств с экраном

speech - задает стили для синтезаторов речи

print - задает стили для элементов которые находятся в режиме предварительного просмотра при печати

Для выбора всех медиа типов можно использовать ключевое слово all, если нужно выбрать несколько, их нужно указать через запятую. Также медиа тип можно не указывать, тогда по умолчанию будет установлено значение all.

В данной статье рассмотрим только один медиа тип screen в контексте адаптивности сайта.

При создании адаптивной верстки обычно ориентиром является ширина области просмотра (viewport), то есть та часть сайта которую видит пользователь. Для корректной работы адаптивной верстки на смартфонах и устройствах с большой плотностью пикселей нужно добавить мета-тег viewport внутрь секции head:

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

Параметры устройства

Параметры указываются в круглых скобках, например: (max-width: 500px)

width (min-width, max-width) - ширина (мин./макс. ширина) области просмотра

height (min-height, max-height) - высота (мин./макс. высота) области просмотра

resolution (min-resolution, max-resolution) - разрешение экрана (мин./макс. разрешение) (кол. пикселей). Значения указываются в:

dpi - кол. точек на дюйм

dpcm - кол. точек на сантиметр

dppx - кол. точек на пиксель

aspect-ratio (min-aspect-ratio, max-aspect-ratio) - соотношение сторон (мин./макс. соотношение) области просмотра

orientation - проверяет в какой ориентации находится область просмотра. Имеет два значения:

landscape - альбомный режим

portrait - портретный режим

Логические операторы

Медиа типы и параметры часто используют вместе. Логические операторы позволяют задать сразу несколько условий или скомбинировать несколько медиа-запросов.

and - логическое И, связывает несколько условий, стили будут применяться если все условия соблюдены

, - (запятая) позволяет перечислить несколько условий, стили будут применяться только к тем условия, которые соблюдены

not - логическое НЕ, отрицает условие

only - не позволяет старым браузерам применять заданные стили (не влияет на современные браузеры)

Пример

Рассмотрим небольшой пример использования медиа-запросов для создания адаптивной верстки. Будем использовать подход задания максимальной ширины области видимости (max-width). Обычно указывают медиа-запрос на определенных значениях ширины, например: max-width: 1280px - для мониторов, max-width: 1024px для планшетов, max-width: 767px для смартфонов, но в примере для удобства будут использованы условные значения.

Изменяйте размер области видимости и смотрите на каких медиа-запросах как меняется верстка: https://codepen.io/Yury_P/pen/bGwoXxN