CSS3 Media Queries

CSS3 Media Queries — это модуль каскадных таблиц стилей (CSS), предоставляющий механизм для адаптации внешнего вида веб-страниц в зависимости от характеристик устройства, на котором они отображаются. Основное назначение media queries заключается в реализации отзывчивого (адаптивного) веб-дизайна, позволяя применять различные стили для экранов разного размера, разрешения, ориентации и других параметров, без изменения исходного HTML-кода.

История и развитие

Идея медиазапросов возникла из необходимости разделять стили для разных типов носителей (экран, печать, проектор). В CSS2 существовали медиатипы (@media screen, @media print), но они не позволяли учитывать характеристики устройства, такие как ширина экрана. Разработка спецификации Media Queries началась в рамках рабочей группы CSS (CSS Working Group) при консорциуме W3C.

Первая версия, Media Queries Level 3, стала рекомендацией W3C в июне 2012 года. Она ввела ключевые возможности: проверку ширины и высоты окна просмотра (width, height), разрешения экрана (resolution), ориентации (orientation), а также поддержку логических операторов (and, not, only). Эта спецификация стала основой для адаптивного дизайна, популяризированного Итаном Маркоттом в 2010 году.

В 2017 году была опубликована рекомендация Media Queries Level 4, которая расширила функциональность: появились новые медиафункции, такие как prefers-reduced-motion (учёт настроек пользователя по уменьшению анимации), prefers-color-scheme (тёмная или светлая тема), hover (наличие возможности наведения), pointer (точность указателя) и другие. Уровень 4 также упростил синтаксис для диапазонных запросов.

Синтаксис и использование

Media queries встраиваются в CSS-код с помощью директивы @media или подключаются через атрибут media в HTML-теге <link>. Основная структура состоит из медиатипа (необязательно) и одного или нескольких медиавыражений, заключённых в круглые скобки.

Базовый синтаксис

``css @media (медиафункция: значение) { / CSS-правила, применяемые при выполнении условия / } ``

Медиатипы

Хотя медиатипы в CSS3 считаются устаревшими для большинства случаев, они всё ещё могут использоваться:

all — все устройства (значение по умолчанию).
print — устройства печати или режим предварительного просмотра.
screen — экраны (мониторы, планшеты, смартфоны).
speech — синтезаторы речи.

Медиафункции

Наиболее часто используемые медиафункции:

width, min-width, max-width — ширина окна просмотра (viewport).
height, min-height, max-height — высота окна просмотра.
orientation — ориентация устройства (portrait — книжная, landscape — альбомная).
resolution, min-resolution, max-resolution — плотность пикселей (в dpi или dpcm).
aspect-ratio, min-aspect-ratio, max-aspect-ratio — соотношение сторон окна просмотра.
hover — поддерживает ли устройство наведение курсора (hover или none).
pointer — точность указателя (fine — мышь, coarse — палец, none).
prefers-color-scheme — предпочитаемая цветовая схема (light или dark).
prefers-reduced-motion — предпочтение уменьшения анимации (no-preference или reduce).

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

Для комбинирования условий используются операторы:

and — все условия должны быть истинны.
not — отрицание всего запроса.
only — используется для предотвращения применения стилей старыми браузерами, не поддерживающими media queries.
, (запятая) — логическое ИЛИ; если хотя бы одно условие истинно, стили применяются.

Примеры

```css / Для экранов шириной до 768 пикселей / @media (max-width: 768px) { body { font-size: 14px; } }

/ Для печати / @media print { .no-print { display: none; } }

/ Для устройств с тёмной темой / @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #ffffff; } }

/ Комбинация: экраны с шириной от 600 до 1200 пикселей в альбомной ориентации / @media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) { .sidebar { width: 30%; } }

/ Для устройств с грубым указателем (пальцы) и шириной менее 1024 пикселей / @media (pointer: coarse) and (max-width: 1023px) { .button { padding: 16px 24px; } } ```

Применение в адаптивном дизайне

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

Контрольные точки (breakpoints)

Контрольные точки — это значения ширины, при которых изменяется макет страницы. Традиционно использовались фиксированные значения (например, 480px, 768px, 1024px), но современный подход рекомендует выбирать точки на основе контента, а не популярных устройств. Распространённые диапазоны:

До 576px — мобильные устройства.
576px — 768px — крупные смартфоны и небольшие планшеты.
768px — 992px — планшеты.
992px — 1200px — небольшие десктопы.
Более 1200px — широкоформатные мониторы.

Типичные сценарии использования

Изменение количества колонок в сетке (например, с 3 на 1 на мобильных).
Скрытие или отображение элементов (например, мобильного меню-гамбургера).
Изменение размеров шрифтов, отступов и изображений.
Адаптация навигации (горизонтальная на десктопе, вертикальная на мобильных).
Оптимизация изображений (подгрузка разных разрешений через srcset в сочетании с media queries).

Ограничения и критика

Несмотря на широкое распространение, media queries имеют ряд недостатков:

Увеличение объёма CSS-кода. При большом количестве контрольных точек файлы стилей могут стать громоздкими и сложными в поддержке.
Сложность тестирования. Необходимо проверять отображение на множестве устройств и разрешений.
Производительность. Хотя современные браузеры эффективно обрабатывают media queries, избыточное количество запросов может незначительно влиять на скорость загрузки.
Альтернативные подходы. Некоторые разработчики предпочитают использовать CSS Grid, Flexbox или JavaScript-библиотеки для адаптации, что может быть более гибким в определённых сценариях. Также набирает популярность концепция «container queries» (запросы к контейнеру), позволяющая адаптировать стили на основе размеров родительского элемента, а не окна просмотра.

Поддержка браузерами

Media Queries Level 3 поддерживается всеми современными браузерами, включая Internet Explorer 9 и выше. Media Queries Level 4, несмотря на статус рекомендации, имеет высокую поддержку в основных браузерах (Chrome, Firefox, Safari, Edge) для большинства функций. Однако некоторые возможности, такие как prefers-contrast или prefers-reduced-transparency, могут быть реализованы не во всех версиях. Для обеспечения обратной совместимости рекомендуется использовать прогрессивное улучшение и проверять поддержку через сервисы вроде Can I Use.

Источники

W3C Recommendation: Media Queries Level 3 (2012).
W3C Recommendation: Media Queries Level 4 (2017).
Ethan Marcotte. «Responsive Web Design» (2010).
MDN Web Docs: «Using media queries».
Can I Use: поддержка CSS Media Queries.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →