レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない

レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない

[musign]

コレ https://github.com/paulirish/matchMedia.js/ つっこんで使ってた。IE8？しらねぇなあ

[megazalrock]

基本的に標準化されていないものを使うのが嫌なので、自分はfont-familyの方法使ってる。／JSでCSSファイルをパース（！）してブレークポイントを取得する実装を見たことある。人間って怖いと思った。

[kvx]

今はまだ画面サイズ検知用の要素作って、font-familyとかをメディアクエリで変更するのが一番楽かな。font-family: "sp";とか。resizeイベント側はfont名を見るだけ。ただイベントで変化を検知できるのはいいなぁ

[glat_design]

メモ /

[efcl]

特定のサイズへの変化の検知にresizeイベントではなくmatchMediaのイベントを使う話