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

Медиазапрос — это конструкция целиком, а медиафункция — кирпичик внутри скобок. В записи @media (min-width: 768px) and (hover: hover) их две. Набор доступных функций со временем вырос: сначала проверяли в основном размеры экрана, теперь можно узнать, есть ли у устройства мышь, просил ли человек меньше анимации, открыт ли сайт как установленное приложение.

Функции бывают двух видов. Диапазонные — ширина, высота, соотношение сторон, разрешение — сравниваются с числом и поддерживают префиксы min- и max- или знаки сравнения. Дискретные принимают одно из фиксированных значений: orientation: portrait, pointer: coarse, prefers-color-scheme: dark.

Самые полезные функции

• width, height, aspect-ratio, orientation — геометрия окна просмотра.
• resolution — плотность экрана, например 2dppx для экранов с удвоенным коэффициентом пикселей.
• hover и pointer — умеет ли основной указатель наводиться и насколько он точен: мышь даёт fine, палец — coarse.
• prefers-color-scheme — светлая или тёмная тема в системе.
• prefers-reduced-motion — просьба уменьшить анимацию, важна для людей с вестибулярными нарушениями.
• forced-colors — включён ли режим принудительных цветов.
• display-mode — открыт ли сайт во вкладке или как установленное приложение (standalone).

Примеры условий

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover .submenu { display: block; }
}
@media (pointer: coarse) {
  .filter-chip { min-height: 44px; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #e8e8e8; }
}
@media (display-mode: standalone) {
  .install-banner { display: none; }
}

Выпадающее меню по наведению включается только там, где наведение существует, а на сенсорных экранах кнопки фильтров становятся крупнее. Тёмная тема переключает переменные, а баннер «Установите приложение» скрывается у тех, кто его уже установил.

Типичные заблуждения

• «Узкий экран — значит телефон». Окно на ноутбуке тоже бывает узким, а у планшета с клавиатурой есть точный указатель. Тип ввода надёжнее проверять через pointer и hover, а не через ширину.
• «Функции device-width и device-height лучше обычных». Они описывают весь экран, а не окно, и признаны устаревшими.
• «Если функция не поддерживается, браузер проигнорирует только её». На деле неизвестное условие обычно делает ложным весь запрос, поэтому базовые стили должны работать и без него.

Синтаксис объединения условий и места, где запросы работают, разобраны в статье про медиазапрос.