Метод Window matchMedia()

Определение и использование

matchMedia() Метод возвращает MediaQueryList с результатами запроса.

См. также:

Объект MediaQueryList

Медиа-запрос

Метод matchMedia() может быть использован для любого медиа-свойства CSS @media, например min-height, min-width, orientation и т.д.

Пример

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Пример

Пример 1

Экран/видимая область больше 700 пикселей по ширине?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Ширина видимой области не превышает 700 пикселей
}
  // Ширина видимой области больше 700 пикселей
}

попробуйте сами

Объяснение примера

Этот пример выполняет media query и сравнивает текущее состояние окна.

Чтобы выполнить резponsive media query при изменении состояния окна, добавьте слушатель событий к объекту MediaQueryList (смотрите примеры ниже):

Пример 2

Если ширина видимой области не превышает 500 пикселей, установите цвет фона в желтый, в противном случае установите розовый:

// Создание функции match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// Создание объекта MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Вызов функции match в runtime:
myFunction(mmObj);
// Добавить функцию match в качестве слушателя изменений состояния:
mmObj.addListener(myFunction);

попробуйте сами

грамматика

window.matchMedia("mediaQuery)

параметр

параметр Описание
mediaQuery Обязателен. Строка, представляющая медиа-запрос.

Возвратное значение

Тип Описание
Объект Объект MediaQueryList с результатами媒体-запросов.

Поддержка браузеров

Все браузеры поддерживают matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 11 Поддержка Поддержка Поддержка Поддержка