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

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

if (window.matchMedia( "(max-width: 412px)" ).matches) {
  /* 画面幅 412px 以下のとき適用 */
}

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

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

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

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

関連記事