JavaScript メディアクエリーのイベントを受け取るには？

/ JavaScript / By
ショコラ
ショコラ

JavaScript メディアクエリーのイベントを受け取るには？

２つのやり方があります。

もっさん先輩
もっさん先輩

①ウィンドウサイズ変更中に「メディアクエリー」で判定しています。

const handler = (event) => {
  if (window.matchMedia('(1px <= width < 768px)').matches) {
    console.log('(1px <= width < 768px)')
  }
  else if (window.matchMedia('(768px <= width < 992px)').matches) {
    console.log('(768px <= width < 992px)')
  }
  else if (window.matchMedia('(992px <= width < 1200px)').matches) {
    console.log('(992px <= width < 1200px)')
  }
  else if (window.matchMedia('(1200px <= width)').matches) {
    console.log('(1200px <= width)')
  }
}

window.addEventListener('resize',handler)

// 最初にハンドラを実行します。
handler()

②メディアクエリーが変わるタイミングで呼び出されます。

こちらの方が効率的ですね。

const mediaQuery1 = window.matchMedia('(1px <= width < 768px)')
const mediaQuery2 = window.matchMedia('(768px <= width < 992px)')
const mediaQuery3 = window.matchMedia('(992px <= width < 1200px)')
const mediaQuery4 = window.matchMedia('(1200px <= width)')

const handler = (event) => {
  if (mediaQuery1.matches) {
    console.log('(1px <= width < 768px)')
  }
  else if (mediaQuery2.matches) {
    console.log('(768px <= width < 992px)')
  }
  else if (mediaQuery3.matches) {
    console.log('(992px <= width < 1200px)')
  }
  else if (mediaQuery4.matches) {
    console.log('(1200px <= width)')
  }
}

mediaQuery1.addListener(handler)
mediaQuery2.addListener(handler)
mediaQuery3.addListener(handler)
mediaQuery4.addListener(handler)

// 最初にハンドラを実行します。
handler()

以上

Scroll to Top