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
js
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.
Result
Specifications
| Specification |
|---|
| CSSOM View Module # dom-mediaquerylist-media |