Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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が未対応でポリフィルを使わないといけないのが個人的にはネックなのでまだあまり使ってないです。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away