始めての投稿になります。
よろしくお願いします。
いつ使う?
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
以上になります。
有難うございました。