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 <span>.

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 <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.

Result

Specifications

Specification
CSSOM View Module
# dom-mediaquerylist-media

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
media

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also