Home NotesJavaScript でメディアクエリの状態変化を検知する

JavaScript でメディアクエリの状態変化を検知する

Published Mar 22, 2025

⋅

Updated Nov 4, 2025

JavaScript でメディアクエリの状態変化を検知するには、まず window インターフェースの matchMedia() にメディアクエリ文字列を渡し、 MediaQueryList オブジェクトを作成する。

その MediaQueryList オブジェクトの change イベントを addEventListener() メソッドで監視する。

const mediaQueryList = window.matchMedia('(min-width: 1024px)');
 
mediaQueryList.addEventListener('change', (event) => {
  if (event.matches) {
    console.log('This is wide screen');
  } else {
    console.log('This is narrow screen');
  }
});

上記のようにすることで、ビューポートをリサイズしたときに 1024px を境に処理を分けることができる。