Edited at

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


以上になります。

有難うございました。