media
は MediaQueryList
インターフェイスの読取専用プロパティであり、 DOMString
でシリアライズされたメディアクエリを表します。
構文
var media = MediaQueryList.media;
値
DOMString
で、シリアライズされたメディアクエリあを表します。
例
この例では、 (max-width: 600px)
のメディアクエリを実行し、 MediaQueryList
の media
プロパティの結果の値を <span>
の中に表示します。
JavaScript
let mql = window.matchMedia('(max-width: 600px)');
document.querySelector(".mq-value").innerText = mql.media;
この JavaScript コードは一致させるメディアクエリを単に matchMedia()
に渡してコンパイルし、それから <span>
の innerText
に media
プロパティの結果の値を設定します。
HTML
<span class="mq-value"></span>
シンプルな <span>
は出力を受け取るためのものです。
CSS
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module media の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。