Метод matchMedia()
Пример matchMedia()
Ширина экрана/области просмотра превышает 700 пикселей:
if (window.matchMedia("(max-width: 700px)").matches) {
// Ширина области просмотра меньше или равна 700 пикселям
} else {
// Область просмотра имеет ширину более 700 пикселей.
}
Попробуйте сами »
Описание matchMedia()
Метод matchMedia() возвращает MediaQueryList с результатами запроса.
Похожи на matchMedia()
Медиа-запросы matchMedia()
Медиа-запросы метода matchMedia() могут быть любыми медиа-функциями CSS @media правила, такими как min-height, min-width, ориентация и т.д.
Примеры matchMedia()
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Синтаксис matchMedia()
window.matchMedia(mediaQuery)
Параметры matchMedia()
| Параметр | Описание |
|---|---|
| mediaQuery | Обязательно. Строка, представляющая медиа-запрос. |
Возвращаемое значение matchMedia()
| Тип | Описание |
|---|---|
| Object | Объект MediaQueryList с результатами медиа-запроса. |
Объяснение примеров matchMedia()
Первый пример на этой странице запускает медиа-запрос и сравнивает его с текущим состоянием окна.
Чтобы запустить адаптивный медиа-запрос всякий раз, когда изменяется состояние окна, добавьте прослушиватель событий к объекту MediaQueryList (см. «Дополнительные примеры» ниже):
Ещё примеры matchMedia()
Если ширина области просмотра меньше или равна 500 пикселям, установите желтый цвет фона, в противном случае — розовый:
// Создать функцию соответствия
function myFunction(x) {
if
(x.matches) {
document.body.style.backgroundColor =
"yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
//
Создать объект MediaQueryList
const mmObj = window.matchMedia("(max-width:
500px)")
// Вызов функции сопоставления во время выполнения
myFunction(mmObj);
// Добавьте функцию сопоставления в качестве прослушивателя изменений состояния.
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
Попробуйте сами »
Поддержка браузера matchMedia()
matchMedia() поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |