JavaScriptでもメディアクエリっぽく条件分岐する方法
.matchMedia() という関数を使って以下のように記述する。
const mediaQuery = matchMedia('(min-width: 768px)');
// ページが読み込まれた時に実行
mediaQuery.addEventListener("change", handle);
// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);
function handle(mq) {
if (mq.matches) {
// ウィンドウサイズが768px以上のとき
} else {
// それ以外
}
}
ブックマーク
.matchMedia()でJSでもメディアクエリを使って条件分岐する
https://spyweb.media/2018/01/10/css-media-queries-in-js-matchmedia/