MediaQueryListEvent

Базовая Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузера. Она доступна во всех браузерах с июля 2015 года.

Объект MediaQueryListEvent хранит информацию о произошедших изменениях в объекте MediaQueryList — экземпляры доступны как объект события в функции, на которую ссылается событие change.

Конструктор

MediaQueryListEvent(): Создает новый экземпляр MediaQueryListEvent.

Свойства экземпляра

Интерфейс MediaQueryListEvent наследует свойства от своего родительского интерфейса, Event.

MediaQueryListEvent.matches Только для чтения: Логическое значение, которое равно true если document в настоящее время соответствует списку медиа-запросов, или false в противном случае.
MediaQueryListEvent.media Только для чтения: Строка, представляющая сериализованный медиазапрос.

Методы экземпляра

Интерфейс MediaQueryListEvent наследует методы от своего родительского интерфейса, Event.

Примеры

const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");

mql.addEventListener("change", (event) => {
  if (event.matches) {
    // The viewport is 600 pixels wide or less
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    // The viewport is more than 600 pixels wide
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
});

Спецификации

Спецификация
CSSOM View Module # the-mediaquerylist-interface

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`MediaQueryListEvent`	39	79	55	26	14	39	55	26	14	4.0	39
`MediaQueryListEvent`	39	79	55	26	14	39	55	26	14	4.0	39
`matches`	39	79	55	26	14	39	55	26	14	4.0	39
`media`	39	79	55	26	14	39	55	26	14	4.0	39

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent