MediaQueryList

Объект MediaQueryList хранит информацию о запросе на медиа, примененном к документу, с поддержкой как немедленного, так и событийно-ориентированного соответствия состоянию документа.

Вы можете создать объект MediaQueryList, вызвав matchMedia() на объекте window. Результирующий объект обрабатывает отправку уведомлений слушателям, когда состояние запроса на медиа меняется (т. е. когда тест запроса на медиа начинает или перестает оцениваться как true).

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

Интерфейс MediaQueryList наследует свойства от своего родительского интерфейса, EventTarget.

matches Только для чтения

Булево значение, возвращающее true, если документ в данный момент соответствует запросу на медиа, или false, если нет.

media Только для чтения

Строка, представляющая сериализованный запрос на медиа.

Интерфейс MediaQueryList наследует методы от своего родительского интерфейса, EventTarget.

addListener() Устаревший

Добавляет в MediaQueryList обратный вызов, который вызывается всякий раз, когда состояние запроса на медиа — соответствует ли документ запросам на медиа в списке — изменяется. Этот метод существует в основном для обеспечения обратной совместимости; если возможно, следует вместо этого использовать addEventListener() для наблюдения за событием change.

removeListener() Устаревший

Удаляет указанный обратный вызов слушателя из обратных вызовов, которые должны быть вызваны, когда MediaQueryList изменяет состояние запроса на медиа, что происходит всякий раз, когда документ переключается между соответствием и несоответствием запросам на медиа, указанным в MediaQueryList. Этот метод сохранен для обратной совместимости; если возможно, обычно следует использовать removeEventListener() для удаления обратных вызовов уведомлений об изменениях (которые ранее должны были быть добавлены с помощью addEventListener()).

Следующие события передаются объектам MediaQueryList:

change

Отправляется объекту MediaQueryList, когда результат выполнения запроса на медиа относительно документа изменяется. Например, если запрос на медиа — (min-width: 400px), событие change срабатывает всякий раз, когда ширина области просмотра документа изменяется таким образом, что его ширина перемещается через границу 400 пикселей в любом направлении.

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

const para = document.querySelector("p");
const mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* the viewport is more than 600 pixels wide */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

Вы можете найти другие примеры на страницах отдельных свойств и методов.

• Запросы на медиа
• Использование запросов на медиа из кода
• window.matchMedia()
• MediaQueryListEvent
• В статье Window.devicePixelRatio также есть полезный пример