Реакция на медиазапрос
Условие
watchMedia(query, onChange, matchMediaFn): подписывается на медиазапрос и вызывает onChange(совпадает) сразу и при каждом изменении. Верни отписку.
Что проверяют тесты
сообщает текущее состояние сразу
реагирует на изменение
отписка снимает слушатель
работает со старым API
Как подойти
Медиазапросы из JS нужны там, где CSS не хватает: не отрисовывать тяжёлый компонент на узком экране, выбрать другой источник данных, учесть prefers-reduced-motion. Немедленный вызов обязателен - иначе до первого изменения интерфейс не знает, в каком он режиме. Проверка наличия addEventListener нужна для Safari старых версий, и это честная причина, а не суеверие.
Подсказки: 2
- Первое значение надо отдать сразу, до любых изменений.
- У MediaQueryList два поколения API: addEventListener и устаревший addListener.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.