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 (max-width: 600px) and displays the value of the resulting MediaQueryList's media property in a .

JavaScript

js
let mql = window.matchMedia("(max-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 's innerText to the value of the result's media property.

HTML

html

A to receive the output.

Result

Specifications

Specification
CSSOM View Module
# dom-mediaquerylist-media

Browser compatibility

See also