MediaQueryList: change イベント

MediaQueryList インターフェイスの change イベントは、メディアクエリーの状態が変化した時に発生します。

構文

addEventListener() 等のメソッドでイベント名を利用するか、イベントハンドラープロパティを設定します。

addEventListener('change', event => { });

onchange = event => { };

イベントタイプ

MediaQueryListEvent (en-US) です。 Event から継承します。

イベントプロパティ

MediaQueryListEvent インタフェースは、親インタフェースである Event からプロパティを継承します。

MediaQueryListEvent.matches読取専用

Booleandocument が現在メディアクエリーのリストに一致していれば true を返し、そうでなければ false を返します。

MediaQueryListEvent.media読取専用

DOMString で、シリアライズされたメディアクエリーを表します。

var mql = window.matchMedia('(max-width: 600px)');

mql.onchange = (e) => {
  if (e.matches) {
    /* ビューポートが 600 ピクセル幅以下 */
    console.log('This is a narrow screen — less than 600px wide.')
  } else {
    /* ビューポートが 600 ピクセル幅より広い */
    console.log('This is a wide screen — more than 600px wide.')
  }
}

仕様書

Specification
CSSOM View Module
# dom-mediaquerylist-onchange

ブラウザーの互換性

BCD tables only load in the browser

関連情報