Правило CSS `@media`

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

Попробуйте

abbr {
  color: #860304;
  font-weight: bold;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  abbr:hover {
    color: #001ca8;
    transition-duration: 0.5s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: " (" attr(title) ")";
  }
}

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
  U.S. government agency that is responsible for science and technology related
  to air and space.
</p>

Синтаксис

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

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

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

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

Описание

В <media-query-list> медиазапроса входят <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

Соотношение ширины и высоты устройства вывода. Устарело в Media Queries Level 4.

device-height

Высота поверхности отображения устройства вывода. Устарело в Media Queries Level 4.

device-posture

Определяет текущее положение устройства, то есть находится ли область просмотра в плоском или сложенном состоянии. Определено в Device Posture API.

device-width

Ширина поверхности отображения устройства вывода. Устарело в Media Queries Level 4.

display-mode

Режим отображения приложения, например режим полноэкранного отображения или «картинка в картинке». Добавлено в Media Queries Level 5.

dynamic-range

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

forced-colors

Определяет, ограничивает ли пользовательский агент цветовую палитру. Добавлено в Media Queries Level 5.

grid

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

height

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

horizontal-viewport-segments

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

hover

Позволяет ли основной механизм ввода наводить указатель на элементы?

inverted-colors

Инвертирует ли пользовательский агент или операционная система цвета? Добавлено в Media Queries Level 5.

monochrome

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

orientation

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

overflow-block

Как устройство вывода обрабатывает содержимое, выходящее за границы области просмотра вдоль блочной оси?

overflow-inline

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

pointer

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

prefers-color-scheme

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

prefers-contrast

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

prefers-reduced-data

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

prefers-reduced-motion

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

prefers-reduced-transparency

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

resolution

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

scan

Является ли вывод на экран прогрессивным или чересстрочным.

scripting

Определяет, доступна ли поддержка скриптов (то есть JavaScript). Добавлено в Media Queries Level 5.

shape

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

update

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

vertical-viewport-segments

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

video-dynamic-range

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

width

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

-moz-device-pixel-ratio

Количество пикселей устройства на один CSS-пиксель. Вместо этого используйте функцию resolution с единицей dppx.

-webkit-animation

Браузер поддерживает CSS-свойство animation с префиксом -webkit. Вместо этого используйте запрос функции @supports (animation).

-webkit-device-pixel-ratio

Количество пикселей устройства на один CSS-пиксель. Вместо этого используйте функцию resolution с единицей dppx.

-webkit-transform-2d

Браузер поддерживает двумерное CSS-свойство transform с префиксом -webkit. Вместо этого используйте запрос функции @supports (transform).

-webkit-transform-3d

Браузер поддерживает трёхмерное CSS-свойство transform с префиксом -webkit. Вместо этого используйте запрос функции @supports (transform).

-webkit-transition

Браузер поддерживает CSS-свойство transition с префиксом -webkit. Вместо этого используйте запрос функции @supports (transition).

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

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

and

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

not

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

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

only

Применяет стиль, только если совпадает весь запрос. Это полезно, чтобы старые браузеры не применяли выбранные стили. Если не использовать only, старые браузеры интерпретируют запрос screen and (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 включена настройка «Сопротивление цифровому отпечатку», многие медиазапросы сообщают значения по умолчанию, а не значения, отражающие фактическое состояние устройства.

Примеры

Проверка типов медиа print и screen

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

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

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

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

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

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

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

Спецификации

Совместимость с браузерами

См. также

• Модуль медиазапросов CSS
• Использование медиазапросов
• Интерфейс CSSMediaRule
• At-rule @custom-media CSS
• Расширенные медиахарактеристики Mozilla
• Расширенные медиахарактеристики WebKit