JavaScriptでもメディアクエリっぽく条件分岐する方法

更新日: 2022.04.8

.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/