JavaScriptのレスポンシブ

CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。

window.matchMedia() を使用する

window.matchMedia(MEDIA QUERY)をつかってMediaQueryListを作成します。

MediaQueryListとは

const mql = window.matchMedia('(min-width:1025px)')
console.log(mql)

// OUTPUT
// MediaQueryList { 
    media: "(min-width: 1025px)", 
    matches: true, 
    onchange: null 
  }

MediaQueryListは上のようなオプジェクトです。media(指定したメディアクエリ)を照合してmatchesにtrue/falseを返します。

ウィンドウサイズの切り替えに応じてmql.matchesは変化しますので、条件分岐すればレスポンシブなJavaScriptが実現します。

// 単純化した例
mql = window.matchMedia('min-width:1025px')

if( mql.matches ){ 
  // function for PC
}else{
  // function for Mobile
}

changeイベントに対応

mql.matchesが変化するとMediaQueryListはchangeイベントを発行するので、イベントリスナーを設置することも可能です。

const func =()=>{
  document.body.style.backgroundColor = (mql.matches) ? "red" : "black"
}

mql.addEventListener('change', func, false)

func()