@media

Правило @media может быть расположено на верхнем уровне вашего кода или вложенным внутри любого другого условного правила.

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Подробное описание синтаксиса запросов медиа см. в Использование запросов медиа.

Запрос медиа включает <media-type>, <media-feature>s и логические операторы.

<media-type> описывает общую категорию устройства. За исключением использования логического оператора only, тип медиа является необязательным, и тип all подразумевается.

all

Подходит для всех устройств.

print

Предназначено для печатных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. (См. печатные медиа для получения информации о проблемах форматирования, характерных для этих форматов.)

screen

Предназначено в первую очередь для экранов.

<media feature> описывает определенные характеристики агента пользователя, устройства вывода или среды. Выражения свойств медиа проверяют их наличие, значение или диапазон значений и являются полностью необязательными. Каждое выражение свойства медиа должно быть заключено в скобки.

any-hover

Разрешает ли любой доступный механизм ввода пользователю наведение курсора на элементы?

any-pointer

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

aspect-ratio

Соотношение ширины к высоте экрана.

color

Количество битов на каждый цветовой компонент устройства вывода или ноль, если устройство не цветное.

color-gamut

Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода.

color-index

Количество записей в таблице поиска цветов устройства вывода или ноль, если устройство не использует такую таблицу.

device-aspect-ratio

Соотношение ширины к высоте устройства вывода. Устарело в запросах медиа уровня 4.

device-height

Высота области отрисовки устройства вывода. Устарело в запросах медиа уровня 4.

device-width

Ширина области отрисовки устройства вывода. Устарело в запросах медиа уровня 4.

display-mode

Режим отображения приложения: например, режим полноэкранного или окна в окне. Добавлен в запросах медиа уровня 5.

dynamic-range

Сочетание яркости, контрастности и цветовой глубины, поддерживаемое агентом пользователя и устройством вывода. Добавлен в запросах медиа уровня 5.

forced-colors

Определяет, ограничивает ли агент пользователя цветовую палитру. Добавлен в запросах медиа уровня 5.

grid

Использует ли устройство сетку или растровый экран?

height

Высота области просмотра.

hover

Разрешает ли основной механизм ввода пользователю наведение курсора на элементы?

inverted-colors

Инвертирует ли агент пользователя или основная операционная система цвета? Добавлен в запросах медиа уровня 5.

monochrome

Биты на пиксель в монохромном буфере кадра устройства вывода или ноль, если устройство не монохромное.

orientation

Ориентация области просмотра.

overflow-block

Как устройство вывода обрабатывает контент, который выходит за пределы области просмотра по оси блока?

overflow-inline

Можно ли прокрутить контент, который выходит за пределы области просмотра по оси вставки?

pointer

Является ли основной механизм ввода указательным устройством и, если да, то насколько точным он является?

prefers-color-scheme

Определяет, предпочитает ли пользователь светлую или темную цветовую схему. Добавлен в запросах медиа уровня 5.

prefers-contrast

Определяет, запросил ли пользователь увеличение или уменьшение контраста между смежными цветами. Добавлен в запросах медиа уровня 5.

prefers-reduced-data

Определяет, запросил ли пользователь веб-контент, который потребляет меньше трафика интернета.

prefers-reduced-motion

Пользователь предпочитает меньше движения на странице. Добавлен в запросах медиа уровня 5.

prefers-reduced-transparency

Определяет, включил ли пользователь на своем устройстве настройку для уменьшения эффектов прозрачности или полупрозрачности, используемых на устройстве.

resolution

Плотность пикселей устройства вывода.

scan

Является ли вывод изображения прогрессивным или чересстрочным.

scripting

Определяет, доступно ли скриптинговое выполнение (т. е. JavaScript). Добавлен в запросах медиа уровня 5.

shape

Определяет форму устройства для различения прямоугольных и круглых дисплеев.

update

С какой частотой устройство вывода может изменять внешний вид контента.

video-dynamic-range

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

width

Ширина области просмотра, включая ширину полосы прокрутки.

Логические операторы not, and, only, и or могут использоваться для составления сложного запроса к медиа. Вы также можете объединить несколько запросов к медиа в одно правило, разделив их запятыми.

and

Используется для объединения нескольких свойств медиа в один запрос к медиа, требуя, чтобы каждое соединённое свойство возвращало true для того, чтобы запрос был true. Также используется для объединения свойств медиа с типами медиа.

not

Используется для отрицания запроса к медиа, возвращая true если бы в противном случае запрос возвращал false. Если он присутствует в списке запросов, разделённых запятыми, он будет отрицать только конкретный запрос, к которому он применяется.

Примечание: В Level 3 ключевое слово not не может использоваться для отрицания отдельного выражения свойства медиа, только всего запроса к медиа.

only

Применяет стиль только если весь запрос соответствует. Это полезно для предотвращения применения выбранных стилей в старых браузерах. Когда не используется only, старые браузеры интерпретировали бы запрос screen and (max-width: 500px) как screen, игнорируя остальную часть запроса и применяя его стили ко всем экранам. Если вы используете оператор only, вам также необходимо указать тип медиа.

, (запятая)

Запятые используются для объединения нескольких запросов к медиа в одно правило. Каждый запрос в списке, разделённом запятыми, рассматривается отдельно от других. Таким образом, если какой-либо из запросов в списке является true, всё утверждение медиа возвращает true. Другими словами, списки ведут себя как логический оператор or.

or

Эквивалентно оператору ,. Добавлен в Media Queries Level 4.

Некоторые запросы к медиа имеют соответствующие указатели клиента агента пользователя. Это HTTP-заголовки, которые запрашивают контент, предварительно оптимизированный для конкретных требований к медиа. Они включают Sec-CH-Prefers-Color-Scheme и Sec-CH-Prefers-Reduced-Motion.

Для наилучшего обеспечения людей, которые изменяют размер текста сайта, используйте em, когда вам нужна <length> для ваших запросов к медиа.

И em, и px являются допустимыми единицами, но em работает лучше, если пользователь меняет размер текста браузера.

Также следует рассмотреть запросы к медиа или HTTP-указатели клиента агента пользователя для улучшения пользовательского опыта. Например, запрос к медиа prefers-reduced-motion или эквивалентный HTTP-заголовок Sec-CH-Prefers-Reduced-Motion могут быть использованы для минимизации количества анимации или движения, используемых в соответствии с предпочтениями пользователя.

Поскольку запросы к медиа предоставляют информацию о возможностях — и, следовательно, о функциях и дизайне — устройства, с которым работает пользователь, существует возможность их злоупотребления для построения "отпечатка пальца", который идентифицирует устройство или, по крайней мере, классифицирует его с такой степенью детализации, которая может быть нежелательной для пользователей.

Из-за этой потенциальной возможности браузер может выбрать искажение возвращаемых значений каким-либо образом, чтобы предотвратить их использование для точного идентификации компьютера. Браузер также может предложить дополнительные меры в этой области; например, если включена настройка Firefox «Предотвратить отслеживание», многие запросы к медиа сообщают значения по умолчанию, а не значения, представляющие фактическое состояние устройства.

@media = 
  @media <media-query-list> { <rule-list> }  

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Синтаксис диапазона позволяет создавать менее громоздкие запросы к медиа при проверке любого свойства, принимающего диапазон, как показано в следующих примерах:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Дополнительные примеры см. в разделе Использование запросов к медиа.

• Модуль CSS media queries
• Использование media queries
• CSSMediaRule интерфейс
• Расширенные средства Mozilla media features
• Расширенные средства WebKit media features