W3cubDocs

MediaQueryListEvent

The MediaQueryListEvent object stores information on the changes that have happened to a MediaQueryList object — instances are available as the event object on a function referenced by a change event.

Constructor

MediaQueryListEvent(): Creates a new MediaQueryListEvent instance.

Instance properties

The MediaQueryListEvent interface inherits properties from its parent interface, Event.

MediaQueryListEvent.matches Read only: A boolean value that is true if the document currently matches the media query list, or false if not.
MediaQueryListEvent.media Read only: A string representing a serialized media query.

Instance methods

The MediaQueryListEvent interface inherits methods from its parent interface, Event.

Examples

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";
  }
});

Specifications

Specification
CSSOM View Module # the-mediaquerylist-interface

Browser compatibility