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 ModuleThe 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.
Update compatibility data on GitHub
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
See also
MediaQueryList.media by Mozilla Contributors is licensed under CC-BY-SA 2.5.