Как использовать медиа-запросы с помощью JavaScript

Использование медиа-запросов с помощью JavaScript

Медиа-запросы были введены в CSS3 и являются одним из ключевых элементов адаптивного веб-дизайна. Медиа-запросы используются для определения ширины и высоты видимой области, чтобы веб-страницы хорошо отображались на всех устройствах (компьютеры, ноутбуки, планшеты, мобильные телефоны и т.д.).

window.matchMedia() Метод возвращает объект MediaQueryList, представляющий результат指定的 CSS-медиа-запроса строки.matchMedia() Значение метода может быть CSS @media любой медиа-функции правил, например min-height,min-width,ориентация и т.д.

Пример

Если ширина видимой области меньше или равна 700 пикселям, измените цвет фона на желтый. Если ширина больше 700 пикселей, измените его на розовый:

function myFunction(x) {
  if (x.matches) { // Если медиа-запрос соответствуетIf media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Создание объекта MediaQueryList
var x = window.matchMedia("(max-width: 700px)");
// Вызов слушателя функции в режиме выполнения
myFunction(x);
// Добавить слушатель функции при изменении состояния
x.addEventListener("change", function() {
  myFunction(x);
);

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

Соответствующие страницы

Учебник:Медиа-запросы CSS

Учебник:Дизайн адаптивных веб-страниц

Референсная книга:Метод JavaScript window.matchMedia()