Медиа-запросы CSS: основы работы

Development | Amber | Комментировать запись

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

Основные медиа-запросы

Медиа-запросы определяются с помощью правила @media, за которым указывается тип и функции медиа. Доступные типы медиа: all, print, screen и speech (если тип не указан, по умолчанию подразумевается all). Одновременно можно использовать несколько типов, в таком случае их разделяют запятыми:

@media screen, print {
  /* Styles for screen and print devices */
}

Примечание: Такие типы медиа, как tv или projection, устарели с выходом Media Queries level 4.

Что касается медиа-функций, они определяются в скобках. Вы можете протестировать широкий спектр функций. Некоторые из наиболее популярных — это width, height, aspect-ratio, orientation и resolution. Многие из этих популярных функций являются функциями диапазона, поэтому они также имеют минимальную и максимальную версии (то есть min-width, max-width, min-aspect-ratio, max-aspect-ratio и т.п.)

В следующем простом примере цвет фона по умолчанию — ярко-розовый, но экранные устройства с шириной области просмотра 650 пикселей или меньше вместо него будут отображать цвет rebeccapurple:

body {
  background: hotpink;
}

@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

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

Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:

@media print {
  /* styles for print media only */
}

@media (max-width: 65rem) {
  /* styles for any device that has a display width of 65rem or less */
}

@media screen and (min-width: 800px) {
  /* styles for screen viewports that have a width of 800px or more */
}

Несколько медиа-функций

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

/* Extra-small */
@media screen and (max-width: 360px) {
  /* ... */
}

/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
  /* ... */
}

/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
  /* ... */
}

/* ... */

Логический оператор or и запятые

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

В следующем примере медиа-запрос будет истинным, если устройство имеет портретную ориентацию или если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:

@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

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

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

@media not screen and (hover: hover) {
  /* ... */
}

Примечание: Тип медиа нужно указывать обязательно. Кроме того, not меняет не весь список запросов (запросы, разделенные запятыми), а только один запрос.

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

Логический оператор only особенный – он скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают ключевое слово only, поэтому игнорируют весь медиа-запрос. Иначе ключевое слово only не действует.

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным. Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать.

Дополнения из Media Queries Level 4

В последнем выпуске спецификации Media Queries Level 4 появилось довольно много новых медиа-функций, которые можно протестировать:

• pointer: определяет, есть ли у вас первичное указывающее устройство (none, coarse и fine).
• any-pointer: определяет, доступно ли какое-либо указывающее устройство (none, coarse и fine).
• hover: определяет, может ли основное указывающее устройство наводить курсор на элементы (none или hover).
• any-hover: определяет, может ли любое из доступных указывающих устройств наводиться на элементы (none или hover).
• color-gamut: диапазон доступных цветов (srgb, p3 или rec2020).
• overflow-inline: способ обработки потенциального переполнения на внутренней оси (none, paged, optional-paged или scroll).
• overflow-block: способ обработки потенциального переполнения на оси блока (none, paged, optional-paged или scroll).
• update: частота, с которой может обновляться макет (none, slow или fast).

Медиа-запросы для дисплеев Retina

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

Чтобы добиться этого, используют медиа-функцию с минимальным разрешением со значением 192 dpi. Однако функция resolution поддерживается не всеми браузерами, и для более надежного подхода можно также добавить дополнительную нестандартную функцию -webkit-min-device-pixel-ratio со значением 2:

@media screen and
  (min-resolution: 192dpi),
  (-webkit-min-device-pixel-ratio: 2) {
    /* ... */
}

Проверить поддержку медиа-функции в браузерах можно на Can I Use.

Ниже вы найдете несколько очень полезных ресурсов, связанных с медиа-запросами:

• Медиа-запросы CSS-Tricks для стандартных устройств
• MQTest.io позволяет проверить, на какие мультимедийные функции реагирует ваше устройство.
• Страничка MDN по доступным медиа-функциям.

Читайте также: CSS-свойство will-change: как использовать