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

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 を境に処理を分けることができる。