MediaQueryList: событие изменения

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

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

Событие change интерфейса MediaQueryList срабатывает при изменении состояния поддержки медиа-запросов.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик событий.

addEventListener("change", (event) => {});

onchange = (event) => {};

Тип события

Объект MediaQueryListEvent. Наследует от Event.

Свойства события

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

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

Пример

const mql = window.matchMedia("(max-width: 600px)");

mql.onchange = (e) => {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /* the viewport is more than 600 pixels wide */
    console.log("This is a wide screen — more than 600px wide.");
  }
};

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

Спецификация
CSSOM View Module # dom-mediaquerylist-onchange

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`change_event`	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/MediaQueryList/change_event