MediaQueryList: media プロパティ
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.
media
は MediaQueryList
インターフェイスの読み取り専用プロパティであり、シリアライズされたメディアクエリーを表す文字列を返します。
値
文字列で、シリアライズされたメディアクエリーを表します。
例
この例では、 (max-width: 600px)
のメディアクエリーを実行し、 MediaQueryList
の media
プロパティの結果の値を <span>
の中に表示します。
JavaScript
js
let mql = window.matchMedia("(max-width: 600px)");
document.querySelector(".mq-value").innerText = mql.media;
この JavaScript コードは一致させるメディアクエリーを単に matchMedia()
に渡してコンパイルし、それから <span>
の innerText
に media
プロパティの結果の値を設定します。
HTML
html
<span class="mq-value"></span>
シンプルな <span>
は出力を受け取るためのものです。
結果
仕様書
Specification |
---|
CSSOM View Module # dom-mediaquerylist-media |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
media |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
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.