The media
read-only property of the MediaQueryList
interface is a DOMString
representing a serialized media query.
Syntax
var media = MediaQueryList.media;
Value
A DOMString
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
let mql = window.matchMedia('(max-width: 600px)'); document.querySelector(".mq-value").innerText = mql.media;
The JavaScript code simply 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
<span class="mq-value"></span>
A simple <span>
to receive the output.
CSS
.mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'media' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
media | Chrome Full support 9 | Edge Full support 12 | Firefox Full support 6 | IE Full support 10 | Opera Full support 12.1 | Safari Full support 5.1 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support