Метод Window matchMedia()

Объект окна JavaScript

matchMedia()Метод возвращает новый объект MediaQueryList, представляющий собой результат интерпретации строки медиазапроса.

Значением метода matchMedia() может бытьПравила CSS @mediaЛюбая медиафункция, например min-height, min-width, orientation и т.д.

Грамматика:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-width: 500px)").matches) {
　　　/* Минимальная ширина области просмотра viewport составляет 500 пикселей */
}
　　　/* Ширина области просмотра viewport меньше 500 пикселей */
}

Совместимость браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает метод matchMedia():

Значение параметра

Технические детали

Более примеров

Если ширина视口中 не превышает 600 пикселей, то цвет фона будет коралловым. Если больше 600, он станет светло-зеленым:

var size = window.matchMedia("(max-width: 600px)"}
myFunc(size) // Вызов функции слушателя в процессе выполнения
size.addListener(myFunc) // Добавить слушатель функции при изменении состояния
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}

См. также

CSS-курс:CSS-медиа-запросы

Объект окна JavaScript