Медиа-запросы¶

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

¶История

Идея адаптации веб-страниц под разные устройства возникла задолго до появления медиа-запросов. В 1990-х годах, когда интернет в основном использовался на настольных компьютерах с однотипными мониторами, необходимость в адаптивной вёрстке отсутствовала. С развитием мобильных устройств, таких как смартфоны и планшеты, возникла проблема отображения сайтов, свёрстанных для больших экранов.

Первая версия медиа-запросов была предложена в 2002 году в рамках спецификации CSS 2.1. Однако она поддерживала только ограниченный набор типов устройств (например, screen, print, handheld) и не позволяла проверять такие параметры, как ширина экрана. В 2012 году спецификация CSS3 Media Queries была утверждена Консорциумом Всемирной паутины (W3C) в качестве рекомендации. Она ввела возможность проверки физических характеристик экрана, таких как ширина, высота, ориентация, разрешение, а также использование логических операторов для комбинирования условий.

¶Синтаксис

Медиа-запрос состоит из двух частей: необязательного типа носителя и одного или нескольких выражений, проверяющих характеристики устройства. Запрос записывается в директиве @media или в атрибуте media тега <link>.

¶Основная форма

``css @media (условие) { / CSS-правила / } ``

Пример:

``css @media (max-width: 768px) { body { font-size: 14px; } } ``

В этом примере стили применяются только к устройствам, ширина экрана которых не превышает 768 пикселей (то есть к планшетам и смартфонам в портретной ориентации).

¶Типы носителей

Тип носителя указывает, для каких устройств предназначен запрос. Наиболее распространённые типы:

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

Пример с указанием типа:

``css @media print { .no-print { display: none; } } ``

¶Характеристики (медиа-функции)

Медиа-функции проверяют конкретные параметры устройства. Наиболее часто используемые:

• width и height — ширина и высота области просмотра (viewport). Часто используются с префиксами min- и max-.
• device-width и device-height — физические размеры экрана устройства (устаревающие, но всё ещё поддерживаемые).
• orientation — ориентация экрана: portrait (книжная) или landscape (альбомная).
• aspect-ratio — соотношение сторон области просмотра (например, 16/9).
• resolution — плотность пикселей (в dpi или dpcm).
• color — количество бит на цветовой канал.
• hover — поддерживает ли устройство наведение курсора (например, мышь).
• pointer — тип указателя: fine (мышь), coarse (палец) или none.

Пример с несколькими условиями:

``css @media (min-width: 600px) and (orientation: landscape) { .sidebar { width: 300px; } } ``

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

• and — все условия должны быть истинными.
• , (запятая) — хотя бы одно условие истинно (аналог «или»).
• not — отрицание всего запроса.
• only — используется для скрытия запроса от старых браузеров, не поддерживающих медиа-запросы.

Пример с оператором not:

``css @media not all and (monochrome) { / Стили для цветных экранов / } ``

¶Применение

¶Адаптивная вёрстка

Основная область применения медиа-запросов — создание адаптивных веб-страниц. Разработчики задают контрольные точки (breakpoints) — значения ширины экрана, при которых макет страницы изменяется. Типичные контрольные точки:

• 320–480 px — смартфоны.
• 768–1024 px — планшеты.
• 1024–1200 px — небольшие мониторы.
• 1200+ px — широкоформатные мониторы.

Пример адаптивной сетки:

```css .container { width: 100%; max-width: 1200px; margin: 0 auto; }

@media (max-width: 768px) { .container { padding: 0 15px; } } ```

¶Отображение на печати

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

``css @media print { nav, .ad, .footer { display: none; } body { font-size: 12pt; line-height: 1.5; } } ``

¶Специфические устройства

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

¶Подходы к организации медиа-запросов

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

1. Desktop-first — сначала пишутся стили для больших экранов, затем с помощью max-width переопределяются для меньших.
2. Mobile-first — сначала стили для мобильных устройств, затем с помощью min-width добавляются для больших экранов. Этот подход считается более современным, так как соответствует принципу прогрессивного улучшения и лучше поддерживается старыми браузерами.

Пример mobile-first:

```css / Базовые стили для мобильных / body { font-size: 16px; }

@media (min-width: 768px) { body { font-size: 18px; } }

@media (min-width: 1200px) { body { font-size: 20px; } } ```

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

• Производительность. Чрезмерное использование медиа-запросов может замедлить загрузку страницы, особенно на мобильных устройствах с ограниченными ресурсами. Рекомендуется минимизировать количество запросов и группировать их.
• Сложность поддержки. При большом количестве контрольных точек код становится сложным для чтения и поддержки. Разработчики часто используют препроцессоры (Sass, Less) или CSS-фреймворки (Bootstrap, Tailwind) для упрощения работы.
• Неполная поддержка старыми браузерами. Internet Explorer 8 и более ранние версии не поддерживают медиа-запросы. Для их поддержки используются полифиллы, например, Respond.js.
• Путаница с пикселями. Медиа-запросы работают с CSS-пикселями, а не с физическими. На устройствах с высокой плотностью пикселей (Retina) один CSS-пиксель может соответствовать нескольким физическим, что иногда приводит к неожиданным результатам.

¶Интересные факты

• Первый сайт, использующий адаптивную вёрстку на основе медиа-запросов, был создан Итаном Маркоттом в 2010 году. Он же ввёл термин «responsive web design» (адаптивный веб-дизайн).
• В 2018 году в спецификацию CSS Media Queries Level 4 были добавлены новые функции, такие как prefers-color-scheme (тёмная или светлая тема) и prefers-reduced-motion (снижение анимации для пользователей с вестибулярными нарушениями).
• В России адаптивная вёрстка стала обязательной для государственных сайтов с 2016 года в соответствии с требованиями к доступности информации для инвалидов.

¶Источники

1. W3C Recommendation: Media Queries (CSS3) — 2012.
2. Ethan Marcotte. Responsive Web Design. A Book Apart, 2011.
3. MDN Web Docs: Using media queries.
4. CSS-Tricks: A Complete Guide to CSS Media Queries.
5. Федеральный закон РФ № 8-ФЗ «Об обеспечении доступа к информации о деятельности государственных органов и органов местного самоуправления» (с изменениями).