Javascriptでもメディアクエリを使いたい!

しばらく腰痛だったjyunzyです。body_deject.gif
布団を敷かずに雑魚寝をしていたのが良くなかったようです。
めんどくさがらずに布団を敷こうと思いました(小学生並みの感想)

レスポンシブのサイトを作っていると、CSSのメディアクエリがとてもありがたく感じますが、実はJavascriptにもメディアクエリがあることをご存じですか?

下記のようにすればできます!

// 幅が768px以上のビューポートのメディアクエリを作成
const mediaQuery = window.matchMedia(‘(min-width: 768px)’)
// メディアクエリがtrueかどうかをチェック
if (mediaQuery.matches) {
  // 実行したいコードを書く
}
スマートフォンの画面サイズとタブレット以上の画面サイズで、実行したいJavascriptを変えたい時に便利です!shine.gif
ユーザーエージェントを使うという手もありますが、それだと新しい機種が出るたびに書き足さないといけないです。
これは重宝しそうですね!wink02.gif

トラックバックURL