Использование медиа-запросов

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

• Типы медиа определяют широкую категорию устройств, к которым применяется медиа-запрос: all, print, screen.

  Тип необязателен (по умолчанию all) за исключением использования логического оператора only.

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

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratio Устаревший
  • device-height Устаревший
  • device-width Устаревший
  • display-mode
  • dynamic-range
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • resolution
  • scripting
  • update
  • video-dynamic-range
  • width.

  Например, свойство hover позволяет запросу проверить, поддерживает ли устройство наведение курсора на элементы. Выражения свойств медиа проверяют их наличие или значение и являются необязательными. Каждое выражение свойства медиа должно быть заключено в скобки.

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

Медиа-запрос вычисляется как true тогда, когда тип медиа (если указан) соответствует устройству, на котором отображается документ, и все выражения свойств медиа вычисляются как true. Запросы с неизвестными типами медиа всегда ложны.

Типы медиа описывают общую категорию данного устройства. Хотя веб-сайты обычно разрабатываются с учётом экранов, вы можете создавать стили, нацеленные на специальные устройства, такие как принтеры или аудио-скринридеры. Например, этот CSS нацелен на принтеры:

@media print {
  /* … */
}

Вы также можете нацеливать на несколько устройств. Например, это @media правило использует два медиа-запроса для нацеливания на устройства как экрана, так и печати:

@media screen, print {
  /* … */
}

Список доступных типов медиа см. в разделе типов медиа. Поскольку типы медиа описывают устройства очень общими терминами, большинство из первоначально определённых типов медиа были устаревшими, и остались только screen, print, и all. Для нацеливания на более специфические характеристики используйте свойства медиа.

Свойства медиа описывают специфические характеристики данного агента пользователя, устройства вывода или среды. Например, вы можете применять определённые стили к широкоформатным мониторам, компьютерам, использующим мышь, или устройствам, используемым в условиях низкой освещённости. В этом примере применяются стили, когда основной механизм ввода пользователя (например, мышь) может наводить курсор на элементы:

@media (hover: hover) {
  /* … */
}

Свойства медиа бывают либо диапазонными, либо дискретными.

Дискретные свойства принимают значения из перечисленного набора возможных ключевых слов. Например, дискретное свойство orientation принимает значения landscape или portrait.

@media print and (orientation: portrait) {
  /* … */
}

Многие диапазонные свойства могут быть префиксны "min-" или "max-" для выражения ограничений "минимального состояния" или "максимального состояния". Например, этот CSS будет применять стили только если ширина области просмотра браузера viewport равна или меньше 1250px:

@media (max-width: 1250px) {
  /* … */
}

Это также можно записать как:

@media (width <= 1250px) {
  /* … */
}

С диапазонными свойствами медиа вы можете использовать префиксы min- и max- или более краткие операторы диапазона <= и =>.

Следующие медиа-запросы эквивалентны:

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

Вышеприведённые сравнения диапазонов включают граничное значение. Чтобы не включать граничное значение, используйте префиксы < и >.

@media (30em < width < 50em) {
  /* … */
}

Если вы создаёте запрос свойства медиа без указания значения, вложенные стили будут использоваться, пока значение свойства не будет равно 0 или none. Например, этот CSS будет применяться к любому устройству с цветным экраном:

@media (color) {
  /* … */
}

Если свойство не применяется к устройству, на котором работает браузер, выражения, включающие это свойство медиа, всегда ложны.

Дополнительные примеры свойств медиа см. на странице справки для каждого конкретного свойства.

Иногда вам может потребоваться создать запрос к медиа, зависящий от нескольких условий. Для этого используются логические операторы: not, and, и only. Кроме того, вы можете объединить несколько запросов к медиа в список, разделенный запятыми; это позволяет применять одни и те же стили в разных ситуациях.

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

Ключевое слово and объединяет параметр медиа с типом медиа или другими параметрами медиа. В этом примере объединяются два параметра медиа, чтобы ограничить стили устройствами с ориентацией по горизонтали с шириной не менее 30 ems:

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Чтобы ограничить стили устройствами со экраном, вы можете прицепить параметры медиа к типу медиа screen:

@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

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

Следующее правило содержит два запроса к медиа. Стиль блока будет применяться, если устройство пользователя имеет высоту 680px или более или если область просмотра браузера находится в портретном режиме (высота области просмотра больше ширины области просмотра):

@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

В этом примере, если пользователь печатает в PDF-файл, а высота страницы составляет 800 пикселей, запрос к медиа возвращает true, потому что первый компонент запроса — который проверяет, имеет ли область просмотра высоту 680px или более — является истинным. Аналогично, если пользователь находится на смартфоне в портретном режиме с высотой области просмотра 480 пикселей, запрос к медиа возвращает true, потому что второй компонент запроса является истинным.

В списке запросов к медиа, разделенных запятыми, отдельные запросы к медиа заканчиваются запятой или, в случае последнего запроса в списке, открывающей скобкой ({).

Ключевое слово not инвертирует значение одного запроса к медиа. Например, стили CSS в этом запросе к медиа будут применяться ко всему, кроме печатных медиа:

@media not print {
  /* … */
}

not инвертирует только запрос к медиа, к которому он применён. not, без скобок, отменяет все параметры внутри запроса к медиа, в котором он содержится. Это означает, что в списке запросов к медиа, разделенных запятыми, каждый not применяется к единственному запросу, в котором он находится, применяясь ко всем параметрам в этом единственном запросе. В этом примере not применяется к первому запросу к медиа, который заканчивается на первой запятой:

@media not screen and (color), print and (color) {
  /* … */
}

Вышеприведённый запрос оценивается так:

@media (not (screen and (color))), print and (color) {
  /* … */
}

Оба примера верны. Условия медиа могут быть сгруппированы, заключая их в скобки (()). Эти группы могут быть вложены в условие так же, как и одиночный запрос к медиа.

not оценивается последним в запросе к медиа, что означает, что он применяется ко всему запросу к медиа, а не к одному параметру внутри запроса, как если бы открывающая скобка была добавлена непосредственно после not и закрыта в конце запроса к медиа.

Следующий запрос:

@media not all and (monochrome) {
  /* … */
}

оценивается так:

@media not (all and (monochrome)) {
  /* … */
}

Он не оценивается так:

@media (not all) and (monochrome) {
  /* … */
}

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

В этом примере мы отменяем параметр медиа hover, но не тип медиа all:

@media all and (not(hover)) {
  /* … */
}

not(hover) соответствует, если у устройства нет возможности наведения. В данном случае, из-за скобок, not применяется к hover, но не к all.

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

@media only screen and (color) {
  /* … */
}

Вы можете использовать or для проверки соответствия среди нескольких параметров, разрешая true , если любой из параметров является истинным. Например, следующий запрос проверяет устройства, имеющие монохромный дисплей или возможность наведения:

@media (not (color)) or (hover) {
  /* … */
}

• @media
• Запросы к контейнерам
• Программное тестирование запросов к медиа
• Анимация CSS между запросами к медиа
• Расширенные параметры медиа Mozilla
• Расширенные параметры медиа WebKit