jQueryでメディアクエリを判定する方法【.matchMedia()を使おう！】

こんにちは、ゆうやです。

本記事ではレスポンシブなWebサイト制作に必須なメディアクエリをcssではなくjQueryで判定する方法を紹介します。

javascript側でコンテンツの文字数に応じて何らかの処理をPC・スマホで分けて行う場合に使用することがあったので備忘録です。

ではではさっそく見ていきましょう！！（と言っても秒で終わります。）

ずばり.matchMedia()を使う

結論から、window.matchMedia()という便利なものがあります。

以下のように使用しましょう。

if (window.matchMedia('(min-width: 768px)').matches) {
  // PC表示の時の処理
  console.log('海賊王におれはなる！');
} else {
  // スマホ表示の時の処理
  console.log('ルフィは海賊王になる男だ');
}

CSSでのメディアクエリ

cssでのメディアクエリも見ておきましょう〜

// PCの時の指定
.Text{
  font-size:18px;
}
@media screen and (max-width:768px){
  // スマホの時の指定
  .Text{
    font-size: 14px;
  }
}

まとめ

いかがでしたでしょうか。

こういう知識は知っているか知らないかで全然違いますよね！知らないとけっこう時間を無駄に使ってしまいますからどんどんよく使う記述は頭の片隅に記憶していつでも取り出せるようにしておきましょう〜