Окно: метод matchMedia()

Метод matchMedia() интерфейса Window возвращает новый объект MediaQueryList, который затем можно использовать для определения соответствия document строке справки по средствам массовой информации, а также для отслеживания документа, чтобы обнаружить, когда он соответствует (или перестает соответствовать) этой справке по средствам массовой информации.

mediaQueryString

Строка, определяющая справку по средствам массовой информации, которая должна быть обработана в MediaQueryList.

Как и в CSS, любой свойство среды должен быть заключён в скобки внутри выражения. Например: matchMedia("(max-width: 600px)") работает, в то время как matchMedia("max-width: 600px") — нет. Ключевые слова для типов сред (all, print, screen) и логических операторов (and, or, not, only) заключать в скобки не нужно.

Новый объект MediaQueryList для справки по средствам массовой информации. Используйте свойства и события этого объекта для определения соответствий и отслеживания изменений этих соответствий со временем.

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

Чтобы выполнить однократную, мгновенную проверку соответствия документа справке по средствам массовой информации, обратитесь к значению свойства matches, которое будет true если документ соответствует требованиям справки по средствам массовой информации.

Если вам нужно постоянно отслеживать, соответствует ли документ справке по средствам массовой информации, вы можете вместо этого отслеживать событие change, которое будет передаваться объекту. В статье о есть хороший пример этом в статье о Window.devicePixelRatio.

В этом примере выполняется справка по средствам массовой информации (max-width: 600px) и отображается значение свойства matches полученного MediaQueryList в <span>; в результате, вывод будет «true», если ширина видимой области экрана меньше или равна 600 пикселей, и «false», если окно шире.

let mql = window.matchMedia("(max-width: 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

Код JavaScript передаёт справку по средствам массовой информации в matchMedia() для компиляции, затем устанавливает значение innerText объекта <span> в значение свойства matches результатов, чтобы указать, соответствует ли документ справке по средствам массовой информации в момент загрузки страницы.

<span class="mq-value"></span>

Простой <span> для получения вывода.

См. Программирование тестов на соответствие справок по средствам массовой информации для дополнительных примеров кода.

• Справки по средствам массовой информации
• Использование справок по средствам массовой информации из кода
• MediaQueryList