Список медиазапросов

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

Каждый запрос в списке проверяется независимо. Если один из них записан с ошибкой, браузер считает ложным только его, а остальные продолжают работать. Внутри одного запроса условия соединяют словом and; в современных браузерах поддерживается и or внутри скобок, но запятая остаётся самым совместимым способом.

Где встречается

• в правиле @media в таблице стилей;
• в атрибуте media у link и source;
• в правиле @import после адреса файла;
• в JavaScript — в методе window.matchMedia().

Пример в CSS

/* Телефон ИЛИ печать */
@media (max-width: 600px), print {
  .sidebar { display: none; }
}

/* Сравните: телефон И книжная ориентация одновременно */
@media (max-width: 600px) and (orientation: portrait) {
  .gallery { grid-template-columns: 1fr; }
}

Перепутать запятую и and — частая ошибка: правило вдруг срабатывает на десктопе или, наоборот, не срабатывает нигде.

Список медиазапросов в JavaScript

Метод matchMedia() принимает такой же список и возвращает объект, который в спецификации так и называется — MediaQueryList. У него есть свойство matches и событие change, поэтому скрипт может реагировать на смену условий без отслеживания ширины окна:

const calm = matchMedia('(prefers-reduced-motion: reduce), (max-width: 600px)');
const apply = () => slider.autoplay = !calm.matches;
apply();
calm.addEventListener('change', apply);

Здесь автопрокрутка слайдера отключается и для пользователей, которые попросили систему уменьшить анимацию, и на узких экранах. Условия по ширине удобно согласовать с точками перелома из CSS, а про тип носителя вроде print подробнее рассказано в статье «Тип носителя».