MediaQueryListEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2020⁩.

TheMediaQueryListEvent object stores information on the changes that have happened to aMediaQueryList object — instances are available as the event object on a function referenced by achange event.

Constructor

MediaQueryListEvent(): Creates a newMediaQueryListEvent instance.

Instance properties

TheMediaQueryListEvent interface inherits properties from its parent interface,Event.

MediaQueryListEvent.matchesRead only: A boolean value that istrue if thedocument currently matches the media query list, orfalse if not.
MediaQueryListEvent.mediaRead only: A string representing a serialized media query.

Instance methods

TheMediaQueryListEvent interface inherits methods from its parent interface,Event.

Examples

const para = document.querySelector("p"); // This is the UI element where to display the textconst mql = window.matchMedia("(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";  }});