A MediaQueryList
オブジェクトは文書に適用されているメディアクエリの情報を格納し、文書の状態に対する中間かつイベントドリブンのマッチングに対応します。 MediaQueryList
は matchMedia()
を window
オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリの状態が変化したとき (つまり、メディアクエリのテストが true
の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。
これにより、定期的に値をポーリングするのではなく、文書を観察してメディアクエリが変更されたときに検出することが可能になり、メディアクエリの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。
プロパティ
MediaQueryList
インターフェイスは親インターフェイスである EventTarget
からプロパティを継承しています。
メソッド
MediaQueryList
インターフェイスは親インターフェイスである EventTarget
からメソッドを継承しています。
addListener()
MediaQueryList
にコールバックを追加します。このコールバックは、メディアクエリの状態 (リスト内のメディアクエリと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりにaddEventListener()
を使用してchange
イベントを監視してください。removeListener()
- 指定されたリスナーコールバックを、
MediaQueryList
でメディアクエリの状態が変化するたび、すなわちMediaQueryList
に列挙されたメディアクエリの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的にremoveEventListener()
を使用して、変更通知コールバックを削除してください (以前addEventListener()
を使用して追加されたものです)。
イベント
以下のイベントは MediaQueryList
オブジェクトに配信されます。
例
このシンプルな例では、 MediaQueryList
を作成し、メディアクエリの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。
var para = document.querySelector('p');
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = 'This is a narrow screen — less than 600px wide.';
document.body.style.backgroundColor = 'red';
} else {
/* the viewport is more than than 600 pixels wide */
para.textContent = 'This is a wide screen — more than 600px wide.';
document.body.style.backgroundColor = 'blue';
}
}
mql.addEventListener(screenTest);
他の例は個別のプロパティやメソッドのページにあります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module MediaQueryList の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser