Окно matchMedia()
Пример 1
Ширина экрана/просмотра больше 700 пикселей:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Определение и использование
Метод matchMedia()
возвращает MediaQueryList с результатами запроса.
Смотрите также:
Медиа-запросы
Медиа-запросы matchMedia()
метода могут быть любыми мультимедийными функциями
правила CSS @media , такими как минимальная высота, минимальная ширина, ориентация и т. д.
Примеры
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Синтаксис
window.matchMedia(mediaQuery)
Параметры
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Возвращаемое значение
Тип | Описание |
Объект | Объект MediaQueryList с результатами мультимедийного запроса. |
Объяснение примеров
Первый пример на этой странице запускает медиа-запрос и сравнивает его с текущим состоянием окна.
Чтобы запускать адаптивный мультимедийный запрос при каждом изменении состояния окна, добавьте прослушиватель событий в объект MediaQueryList (см. «Дополнительные примеры» ниже):
Дополнительные примеры
Если окно просмотра меньше или равно 500 пикселей в ширину, установите цвет фона на желтый, в противном случае на розовый:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Поддержка браузера
matchMedia()
поддерживается во всех современных браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |