More than 5 years have passed since last update.

jsでメディアクエリ制御したい時はwindow.matchMediaがいいみたい

Last updated at 2018-03-07Posted at 2018-03-06

CSSでのメディアクエリ制御@media (max-width: 768px)〜みたいなのには慣れているけどjsで制御する時にinnerWidthの幅を取得して〜resizeイベントで幅を比べて〜resizeイベントが発火しまくるのを防ぐためにsetTimeoutで間引いて〜とかやったりしててわーーっとなってた人はwindow.matchMedia使うといいよっていうメモです。

window.matchMediaの使い方

window.matchMedia

DEMO


$(function() {
  var mq = window.matchMedia('(max-width: 768px)');// 横幅768px以下の時
  function checkBreakPoint(mq) {
    if (mq.matches) {
      $('.menu').text('SPです');
      $('.menu').css('background', '#000');
    } else {
      // PC向け
      $('.menu').text('PCです');
      $('.menu').css('background', '#f00');
    }
  }
  // ブレイクポイントにイベント設定
  mq.addListener(checkBreakPoint);

  // 初回チェック
  checkBreakPoint(mq);
});

画像の出し分けだけならhtml5のpicture要素を使うのもあり
HTML 5.1の新要素picture入門

ただしIE11が未対応でポリフィルを使わないといけないのが個人的にはネックなのでまだあまり使ってないです。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up