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

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

.matchMedia() という関数を使って以下のように記述する。

var mediaQuery = matchMedia('(max-width: 798px)');

// ページが読み込まれた時に実行
handle(mediaQuery);

// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);

function handle(mq) {
  if (mq.matches) {
    // ウィンドウサイズが798px以下のとき
  } else {
    // それ以外
  }
}

ブックマーク

.matchMedia()でJSでもメディアクエリを使って条件分岐する

https://spyweb.media/2018/01/10/css-media-queries-in-js-matchmedia/