JavaScript

JavaScriptでMediaQueryをトリガーにしたい場合は「MediaQueryList」を利用する

始めての投稿になります。
よろしくお願いします。


いつ使う?

JavaScriptでMedia Queriesを使用したいとき。
- UIを変更したい
- レイアウトを変更したい(CSSだけでは実現できない)

使い方

  • MediaQueryListオブジェクトを作る
  • 実行したい処理を作る
  • 予約する

// MediaQueryの文字列(例:'(max-width: 414px)')を引数にして、objを受け取る
const mql = window.matchMedia(MediaQuery); 

//コールバック
const callback = (event)=>{
***
}

// MediaQueryのイベントからコールバックを実行する。
mql.addListener(callback); 

その他

MediaQueryListはいくつかプロパティをもっています。
例えばmatchesはビューポートの状態に応じてBooleanを返します。

コールバックの例

const callback = (event) = {
  if(event.matches) {
    // trueの場合の処理
  } else {
    // falseの場合の処理
  }
}

参考

MediaQueryList
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

window.matchMedia をそろそろ活用してもいい頃
https://qiita.com/amamamaou/items/a29b29f5267196a5e4ea


以上になります。
有難うございました。