BLOG

jsでmedia queryが簡単になった「matchMedia(“(max-width: ***px)”).matches」が便利!

| JavaScript

CSSでやってたMediaQueryがJSで必要になったときが多々ある。
いままでは、出来る限りCSSで対処できる方法を模索しておりましたが、CSSで処理しているかのようにJSで出来るようになってた!
matchMediaってのと使えばいいみたいだ!
matchMediaは、最近のブラウザは対応しているので気兼ねなく使える!

簡単な使い方としてはこんな感じ!

if(matchMedia("(max-width: 768px)").matches){
  // ブラウザサイズが768px以下のときの処理
} else {
  // ブラウザサイズが767px以上のと木の処理
}

いやーわかりやすいね!
感覚的にCSSと同じですね。

jQueryを使わなくてもresizeイベントの回数を減らせる で書いてるようにresizeイベントを使えばレスポンシブとして対応できます。

var timer = 0;
window.onresize = function () {
  if (timer > 0) {
    clearTimeout(timer);
  }

  timer = setTimeout(function () {
    resizeFunc();
  }, 200);
};

resizeFunc = function(){
  if(matchMedia("(max-width: 768px)").matches){
    // ブラウザサイズが768px以下のときの処理
  } else {
    // ブラウザサイズが767px以上のと木の処理
  }
}
resizeFunc();

こんな感じで、対応出来るのではないでしょうか。
他のやり方もできるみたいですね。

matchMedia("(max-width:768px)").addListener( resizeFunc );

resizeFunc = function(){
  // ブラウザサイズが768px以下のときの処理

  if (matchMedia("(max-width:767px)").matches) {
    // ブラウザサイズが767px以上のと木の処理
  }
}

これで切り替えの時にイベントが発生するようです。
こっちのほうが便利じゃんw
レスポンシブデザインを始めて、JavaScriptでの処理を敬遠をしておりましたが、なんの気兼ねもなく処理ができますね。
JavaScriptが好きなので、この技術はすごくありがたいですね。

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP