見出し画像

【jQuery】メディアサイズを指定してJSを適用する

めめも

こんな基本事項を知らなかったのです。恐ろしい・・
今まではなんだか回りくどい書き方をしてたのですが、CSSと似たような書き方で使えるのですね。

基本型

if (window.matchMedia( "(max-width: 768px)" ).matches) {
  ウィンドウ幅が768px以下の場合だけ行う処理
}

実例はこちら

if (window.matchMedia( "(min-width: 1140px)" ).matches) {

  const fixed_header = $('.hoge');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 400) {
      fixed_header.addClass('is--show');
    } else {
      fixed_header.removeClass('is--show');
    }
  });

}

以下の記事をそのまま参考にさせていただきました！
記事中には上記のメディアクエリ的な方法の他に、ユーザエージェントによる絞り込み方法も記載されています。感謝。



いいなと思ったら応援しよう！