window.matchMediaでJavaScriptもCSSと同じ基準でレスポンシブ管理

JavaScriptの matchMediaをこのように使うと

<br />
if (window.matchMedia( &quot;(max-width: 412px)&quot; ).matches) {<br />
  /* 画面幅 412px 以下のとき適用 */<br />
}<br />

CSSのレスポンシブ対応のmedia設定と平仄をあわせてレスポンシブの分岐を設定できます。

<br />
@media screen and ( max-width: 412px ) {<br />
  /* 画面幅 412px 以下のとき適用 */<br />
}<br />

Interner Explorer 10 から対応しているので、そろそろ使えそうです。

参考:
window.matchMedia – Web API インターフェイス | MDN

関連記事