Медиазапрос

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

Запрос состоит из необязательного типа носителя (screen, print, all) и набора условий в скобках. Каждое условие — это медиафункция со значением: ширина, ориентация, предпочитаемая тема.

Синтаксис на примере

.catalog { display: grid; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
}
@media (width >= 1200px) and (hover: hover) {
  .catalog { grid-template-columns: repeat(4, 1fr); }
}
@media print {
  .site-header, .cart-button { display: none; }
}

Базовые стили написаны для узкого экрана, а запросы с min-width добавляют колонки по мере роста ширины — это подход Mobile First. Второй запрос использует новый диапазонный синтаксис со знаками сравнения, который поддерживают современные браузеры. Оператор and объединяет условия, запятая работает как «или», not инвертирует весь запрос.

Где ещё работают медиазапросы

• В HTML: <link rel="stylesheet" href="print.css" media="print"> и <source media="(min-width: 800px)"> внутри picture для разных кадрирований картинки.
• В JavaScript: window.matchMedia('(max-width: 767px)') возвращает объект, у которого есть свойство matches и событие change. Так скрипт включает мобильное меню синхронно со стилями.

Где ошибаются

• Пересекающиеся границы: max-width: 768px и min-width: 768px одновременно срабатывают на ширине ровно 768. Новый синтаксис width < 768px решает это аккуратнее.
• Слишком много точек перелома под конкретные модели телефонов вместо нескольких, выбранных по содержимому.
• Нет meta viewport в шаблоне — мобильный браузер рисует страницу шириной около 980 пикселей, и запросы для узких экранов не срабатывают.

Если блок должен подстраиваться под ширину своей колонки, а не всего экрана, нужен уже контейнерный запрос.