Как использовать CSS Media Queries: полное руководство для начинающих

Оглавление:

• Синтаксис медиа-запросов CSS #
• Определение типов мультимедиа в медиазапросах CSS #
• Модификаторы медиазапроса (логические операторы) #
• Общие медиа-функции для медиа-запросов CSS #
• Менее распространенные медиа-функции для медиа-запросов CSS #
• Медиа-функции из медиа-запросов CSS уровня 5 #
• Нестандартные медиа-функции #
• Лучшие практики для медиа-запросов CSS #

Как использовать медиа-запросы CSS: синтаксис

Прежде чем я перейду к различным медиа-функциям, давайте рассмотрим базовый синтаксис медиа-запроса CSS. Медиа-запрос выглядит так:

 @media screen and ( min-width: 900px ) { article { padding : 1rem 3rem ; } }
 Язык кода: CSS ( css )

Чтобы помочь вам разбить каждую из частей, вот удобное изображение, которое идентифицирует все части типичного медиа-запроса CSS:

И вот краткое изложение вместе с более подробной информацией о том, что изображено на изображении:

• @media — правило CSS, указывающее, что вы пишете медиа-запрос.
• screen — один из доступных типов медиа, чтобы определить, на какие устройства должен быть нацелен медиа-запрос. Это необязательно, если вы не используете операторы not и only .
• and – модификатор медиа-запроса, также называемый логическим оператором, который помогает вам условно ориентироваться на определенные устройства и медиа-функции.
• (min-width: 900px) — одна из многочисленных медиа-функций и значений, доступных для определенных размеров устройств, типов устройств, возможностей устройства и т. д.
• article { ... } — селекторы и правила CSS, вложенные в открывающие и закрывающие фигурные скобки, указывающие, какие правила CSS вы хотите применить к своим медиа-запросам.

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

Как использовать медиа-запросы CSS: определение типов медиа

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

• all — указывает, что вы хотите настроить таргетинг на все устройства без исключения.
• print — Нацелены на устройства, которые отправляют вывод на дисплей для печати, такой как окно «Предварительный просмотр» в веб-браузере.
• screen — это противоположность print , ориентированная на все устройства, не подпадающие под категорию print .

Выше приведены единственные типы носителей, которые вы должны использовать, если таковые имеются. В спецификации запросов мультимедиа CSS уровня 4 многие ранее поддерживаемые типы мультимедиа теперь объявлены устаревшими. Спецификация не рекомендует использовать их, и браузерам предписывается игнорировать их, но при этом рассматривать их как «действительный» код (чтобы убедиться, что код не сломается в будущем). К этим типам носителей относятся: tty , tv , projection , handheld , braille , embossed , aural и speech .

Обратите внимание, что спецификация также объясняет:

Другими словами, ожидается, что однажды мы напишем все наши медиа-запросы без типов медиа.

Вас также могут заинтересовать:

• WordPress REST API: что это такое и как начать его использовать
• Полное руководство по CSS Grid для начинающих (с интерактивными примерами)
• Тест скорости мобильного сайта не удался? Вот 10 способов улучшить скорость мобильной страницы ️

Модификаторы медиа-запросов (логические операторы)

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

Модификатор — это отдельное ключевое слово, которое влияет на значение медиафункции, следующей за ним. Доступные модификаторы:

Модификатор not

Когда этот модификатор предшествует медиа-функции, он исключает целевые устройства из медиа-запроса (аналогично тому, как работает селектор CSS :not() ).

Вот пример:

 @media not print { article { padding : 1rem 3rem ; } }
 Язык кода: CSS ( css )

Приведенный выше медиа-запрос будет нацелен на все устройства, не являющиеся устройствами печати, поэтому вышеприведенное будет эквивалентно использованию screen без модификатора.

only модификатор

Этот модификатор специально предназначен для того, чтобы помочь устаревшим браузерам правильно анализировать медиа-запрос. Как поясняется в спецификации: «Ключевое слово only не влияет на результат медиа-запроса, но приведет к тому, что медиа-запрос будет проанализирован устаревшими пользовательскими агентами как указание неизвестного типа медиа «только» и, следовательно, будет проигнорирован».

Взгляните на пример:

 @media only screen { article { padding : 1rem 3rem ; } }
 Язык кода: CSS ( css )

Модификатор and

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

Пример выглядит следующим образом:

 @media screen and ( min-width: 800px ) { article { padding : 1rem 3rem ; } }
 Язык кода: CSS ( css )

Вышеприведенное предназначено для всех непечатающих устройств, ширина которых равна или превышает 800 пикселей.

Модификатор ,

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

Вот пример:

 @media screen and ( min-width: 800px ), print and ( min-width: 1000px ) { article { padding : 1rem 3rem ; } }
 Язык кода: CSS ( css )

Стили в приведенном выше медиа-запросе будут нацелены на любой из двух медиа-запросов, разделенных запятой. Это похоже на то, как работает запятая при использовании селекторов CSS.

Общие медиа-функции для медиа-запросов CSS

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

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

В этом разделе рассматриваются наиболее часто используемые и наиболее поддерживаемые функции мультимедиа:

width : Ширина области просмотра, включая ширину полосы прокрутки. Также позволяет использовать префиксы min- и max- .

 @media ( width: 800px ) { ... } @media ( min-width: 360px ) { ... } @media ( max-width: 1400px ) { ... }
 Язык кода: CSS ( css )

height : высота области просмотра. Принимает префиксы min- и max- .

 @media ( height: 500px ) { ... } @media ( min-height: 400px ) { ... } @media ( max-height: 400px ) { ... }
 Язык кода: CSS ( css )

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

 @media ( orientation: portrait) { ... } @media ( orientation: landscape) { ... }
 Язык кода: CSS ( css )

display-mode : режим отображения приложения, указанный в манифесте веб-приложения.

 @media ( display-mode: fullscreen) { ... } @media ( display-mode: standalone) { ... } @media ( display-mode: minimal-ui) { ... } @media ( display-mode: browser) { ... }
 Язык кода: CSS ( css )

aspect-ratio : На основе указанного соотношения сторон, обозначаемого двумя положительными целыми числами, разделенными косой чертой.

 @media ( aspect-ratio: 16 / 9 ) { ... }
 Язык кода: CSS ( css )

color : Количество битов на компонент цвета устройства вывода или ноль, если устройство не использует цвет. Также позволяет использовать префиксы min- и max- . Отсутствие значения означает, что вы ориентируетесь на любое цветное устройство.

 @media (color) { ... } @media ( color: 8 ) { ... } @media ( min-color: 8 ) { ... } @media ( max-color: 16 ) { ... }
 Язык кода: CSS ( css )

grid : определить, использует ли устройство экран на основе сетки (например, текстовый терминал) или экран на основе растрового изображения (например, большинство современных компьютеров, планшетов и смартфонов). Значение 1 означает на основе сетки, значение 0 означает на основе растрового изображения.

 @media ( grid: 0 ) { ... } @media ( grid: 1 ) { ... }
 Язык кода: CSS ( css )

monochrome : количество битов на пиксель в монохромном буфере кадров устройства.

 @media ( monochrome: 0 ) { ... } @media (monochrome) { ... }
 Язык кода: CSS ( css )

resolution : плотность пикселей устройства вывода. Можно также использовать префиксы min- и max- .

 @media ( resolution: 72dpi ) { ... } @media ( min-resolution: 300dpi ) { ... } @media ( max-resolution: 150dpi ) { ... }
 Язык кода: CSS ( css )

Менее распространенные медиа-функции для медиа-запросов CSS

Следующие мультимедийные функции используются не так часто, но могут оказаться полезными в определенных обстоятельствах. Некоторые из них также могут не поддерживаться браузером, поэтому перед использованием любого из них обязательно обратитесь за поддержкой на caniuse.com или MDN.

any-hover : присутствует ли функция наведения.

 @media ( any-hover: none) { ... } @media ( any-hover: hover) { ... }
 Язык кода: CSS ( css )

any-pointer : присутствует ли указывающее устройство и насколько оно точное.

 @media ( any-pointer: none) { ... } @media ( any-pointer: course) { ... } @media ( any-pointer: fine) { ... }
 Язык кода: CSS ( css )

color-gamut : приблизительный диапазон цветов, поддерживаемых устройством.

 @media ( color-gamut: srgb) { ... } @media ( color-gamut: p3) { ... } @media ( color-gamut: rec2020) { ... }
 Язык кода: CSS ( css )

color-index : количество записей в таблице поиска цветов устройства вывода. Также позволяет использовать префиксы min- и max- . Отсутствие значения означает, что вы ориентируетесь на любой цветовой индекс.

 @media (color-index) { ... } @media ( min-color-index: 15000 ) { ... } @media ( max-color-index: 30000 ) { ... }
 Язык кода: CSS ( css )

hover : если пользователь может наводить курсор на элементы.

 @media ( hover: none) { ... } @media ( hover: hover) { ... }
 Язык кода: CSS ( css )

overflow-block : как устройство обрабатывает содержимое, которое выходит за пределы оси блока.

 @media ( overflow-block: none) { ... } @media ( overflow-block: scroll) { ... } @media ( overflow-block: optional-paged) { ... } @media ( overflow-block: paged) { ... }
 Язык кода: CSS ( css )

overflow-inline : как устройство обрабатывает контент, выходящий за пределы области просмотра вдоль встроенной оси.

 @media ( overflow-inline: none) { ... } @media ( overflow-inline: scroll) { ... }
 Язык кода: CSS ( css )

pointer : если на устройстве есть указатель.

 @media ( pointer: none) { ... } @media ( pointer: coarse) { ... } @media ( pointer: fine) { ... }
 Язык кода: CSS ( css )

scan : если устройство чересстрочное (например, некоторые плазменные телевизоры) или прогрессивное (как большинство компьютерных мониторов).

 @media ( scan: interlace) { ... } @media ( scan: progressive) { ... }
 Язык кода: CSS ( css )

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

 @media ( update: none) { ... } @media ( update: slow) { ... } @media ( update: fast) { ... }
 Язык кода: CSS ( css )

Медиа-функции из медиа-запросов CSS уровня 5

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

dynamic-range : комбинация яркости, контрастности и глубины цвета, поддерживаемая устройством.

 @media ( dynamic-range: standard) { ... } @media ( dynamic-range: high) { ... }
 Язык кода: CSS ( css )

forced-colors : определить, включено ли устройство выбранной пользователем ограниченной цветовой палитры, например, в случае, когда включен режим высокой контрастности Windows.

 @media ( forced-color: none) { ... } @media ( forced-color: active) { ... }
 Язык кода: CSS ( css )

horizontal-viewport-segments : Количество логических горизонтальных сегментов области просмотра.

 @media ( horizontal-viewport-segments: 3 ) { ... }
 Язык кода: CSS ( css )

environment-blending : Запрос характеристик дисплея пользователя.

 @media ( environment-blending: opaque) { ... } @media ( environment-blending: additive) { ... } @media ( environment-blending: subtractive) { ... }
 Язык кода: CSS ( css )

inverted-colors : если браузер или ОС инвертируют цвета.

 @media ( inverted-colors: none) { ... } @media ( inverted-colors: inverted) { ... }
 Язык кода: CSS ( css )

nav-controls : предоставляет ли браузер обнаруживаемые элементы управления навигацией.

 @media ( nav-controls: none) { ... } @media ( nav-controls: back) { ... }
 Язык кода: CSS ( css )

prefers-contrast : если пользователь предпочитает увеличение или уменьшение контраста между соседними цветами.

 @media ( prefers-contrast: no-preference) { ... } @media ( prefers-contrast: more) { ... } @media ( prefers-contrast: less) { ... }
 Язык кода: CSS ( css )

prefers-color-scheme : если пользователь предпочитает светлую или темную цветовую схему.

 @media ( prefers-color-scheme: light) { ... } @media ( prefers-color-scheme: dark) { ... }
 Язык кода: CSS ( css )

prefers-reduced-data : если пользователь предпочитает альтернативный контент, который использует меньше данных.

 @media ( prefers-reduced-data: no-preference) { ... } @media ( prefers-reduced-data: reduce) { ... }
 Язык кода: CSS ( css )

prefers-reduced-motion : если пользователь предпочитает меньше движения на странице.

 @media ( prefers-reduced-motion: no-preference) { ... } @media ( prefers-reduced-motion: reduce) { ... }
 Язык кода: CSS ( css )

prefers-reduced-transparency : если пользователь запросил систему, минимизируйте количество эффектов прозрачного или полупрозрачного слоя.

 @media ( prefers-reduced-transparency: no-preference) { ... } @media ( prefers-reduced-transparency: reduce) { ... }
 Язык кода: CSS ( css )

scripting : если доступны сценарии (почти всегда JavaScript).

 @media ( scripting: none) { ... } @media ( scripting: initial- only ) { ... } @media ( scripting: enabled) { ... }
 Язык кода: CSS ( css )

vertical-viewport-segments : Количество логических горизонтальных сегментов области просмотра.

 @media ( vertical-viewport-segments: 3 ) { ... }
 Язык кода: CSS ( css )

video-color-gamut : приблизительный диапазон цветов, поддерживаемых браузером и устройством.

 @media ( video-color-gamut: srgb) { ... } @media ( video-color-gamut: p3) { ... } @media ( video-color-gamut: rec2020) { ... }
 Язык кода: CSS ( css )

video-dynamic-range : приблизительный диапазон цветов, поддерживаемых браузером и устройством.

 @media ( video-dynamic-range: standard) { ... } @media ( video-codynamic-range: high) { ... }
 Язык кода: CSS ( css )

Нестандартные медиа-функции

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

-webkit-device-pixel-ratio : альтернатива функции мультимедиа resolution , определяемой числовым значением.

 @media ( -webkit-device-pixel-ratio: 2 ) { ... }
 Язык кода: CSS ( css )

webkit-animation : если устройство поддерживает анимацию с префиксом поставщика.

 @media ( -webkit-animation: true) { ... } @media ( -webkit-animation: false) { ... }
 Язык кода: CSS ( css )

webkit-transform-2d : если устройство поддерживает 2D-преобразования CSS с префиксом поставщика.

 @media (-webkit-transform- 2 d: true) { ... } @media (-webkit-transform- 2 d: false) { ... }
 Язык кода: CSS ( css )

webkit-transform-3d : если устройство поддерживает 3D-преобразования CSS с префиксом поставщика.

 @media (-webkit-transform- 3 d: true) { ... } @media (-webkit-transform- 3 d: false) { ... }
 Язык кода: CSS ( css )

webkit-transition : устаревшая функция, которая определяет, поддерживает ли устройство переходы с префиксом поставщика.

 @media ( -webkit-transition: true) { ... } @media ( -webkit-transition: false) { ... }
 Язык кода: CSS ( css )

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

Лучшие практики для медиа-запросов CSS

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

• Не пишите медиа-запросы для устройств определенного размера, таких как iPad, iPhone и т. д. Пишите медиа-запросы в соответствии с тем, как ваши макеты «разрываются» в разных точках (отсюда и термин «точки останова»). Это означает, что вы разрешаете содержимому определять точки останова.
• Если возможно, используйте подход, ориентированный на мобильные устройства, с вашими медиа-запросами, где ваш CSS-запрос, не относящийся к медиа, будет применяться к самому маленькому устройству, а затем при необходимости добавьте медиа-запросы для больших окон просмотра.
• Воспользуйтесь преимуществами функций макета CSS, таких как flexbox и CSS grid, чтобы естественным образом создавать макеты, которые реагируют без необходимости медиа-запросов, если это возможно.
• Не игнорируйте возможность использования вертикальных медиазапросов, которые проверяют высоту окна просмотра. Это может помочь вам избежать некоторых ошибок макета на небольших устройствах.
• Не зацикливайтесь только на ширине и высоте. Используйте некоторые другие хорошо поддерживаемые мультимедийные функции, которые могут помочь с доступностью и общим UX ваших макетов на разных устройствах.

Медиа-запросы CSS в 2022 году и позже

Все новые медиа-функции, представленные за последние несколько лет, сделали возможности написания мультимедийных запросов CSS захватывающими и мощными!

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

Если у вас есть какие-либо вопросы о том, как использовать медиа-запросы CSS в 2022 году, сообщите нам об этом в разделе комментариев ниже.

Макет и презентация Кароль К.