メディアクエリを使ってJavaScriptの処理を分岐させる

メディアクエリを使った処理

(function() {

  // メディアクエリの定義
  const mediaQuery = window.matchMedia('(max-width: 768px)');

  function handleScreenChange(e) {
    // デバイス別のclassを付与したい要素（例：.header）
    const header = document.querySelector('.header');

    if (e.matches) {
      // 768px以下の場合（SP）
      header.classList.add('is_sp');
      header.classList.remove('is_pc');

    } else {
      // 768pxより大きい場合（PC）
      header.classList.add('is_pc');
      header.classList.remove('is_sp');

    }
  }

  // メディアクエリの状態が変更されたときにhandleScreenChange関数が呼ばれるようにする
  mediaQuery.addEventListener('change', handleScreenChange);

  // 初期ロード時にも状態をチェック
  handleScreenChange(mediaQuery);

})();