MediaQueryList: media プロパティ
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 |
ブラウザーの互換性
BCD tables only load in the browser