MediaQueryListEvent: media property

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.

Themedia read-only property of theMediaQueryListEvent interface is a string representinga serialized media query.

Value

A string representing a serialized media query.

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";  }  console.log(event.media);});