MediaQueryList （window.matchMedia）を使ってJavaScriptでメディアクエリにマッチした際の処理を記述する 📝

MediaQueryListのchangeイベントを使って、CSSのメディアクエリを使って書いていた処理をJavaScriptに移植してみます。

developer.mozilla.org
developer.mozilla.org

CSSバージョン（MediaQuery）

ウィンドウ幅が375pxまでは「window.innerWidth <= 375px」、376pxを超えると「376px <= window.innerWidth 」と表示するCSSを書いてみました。

HTML

<p>window.innerWidth</p>

CSS

@media (max-width: 375px) {
  p:after {
    content: ' <= 375px';
  }
}

@media (min-width: 376px) {
  p:before {
    content: '376px <= ';
  }
}

これを、MediaQueryList （window.matchMedia）を使ってJavaScriptで書くと、

JavaScriptバージョン（MediaQueryList）

HTML

<p>h</p>

JavaScript

const mediaQueryList = window.matchMedia('(min-width: 376px)');

mediaQueryList.addEventListener('change', handleChangeMediaQuery);

function handleChangeMediaQuery(evt) {
  if (evt.matches) {
    document.querySelector('p').innerText = '376px <= window.innerWidth';
  } else {
    document.querySelector('p').innerText = 'window.innerWidth <= 375px';
  }
}

handleChangeMediaQuery(mediaQueryList);