MediaQueryList: change イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年9月⁩.

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

構文

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

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

onchange = (event) => {};

イベント型

MediaQueryListEvent です。 Event から継承しています。

イベントプロパティ

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

MediaQueryListEvent.matches 読取専用: 論理値です。 document が現在メディアクエリーのリストに一致していれば true を返し、そうでなければ false を返します。
MediaQueryListEvent.media 読取専用: 文字列で、シリアライズされたメディアクエリーを表します。

例

const 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.");
  }
};