MediaQueryList: 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 ⁨July 2015⁩.

The media read-only property of the MediaQueryList interface is a string representing a serialized media query.

Value

A string representing a serialized media query.

Examples

This example runs the media query (width <= 600px) and displays the value of the resulting MediaQueryList's media property in a <span>.

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.media;

The JavaScript code passes the media query to match into matchMedia() to compile it, then sets the <span>'s innerText to the value of the result's media property.

HTML

html

<span class="mq-value"></span>

A <span> to receive the output.

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

Result

Specifications

Specification
CSSOM View Module # dom-mediaquerylist-media

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 13, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content