javascript - css3-mediaqueries.js VS response.js

Question

response.jsまたはcss3-mediaqueries.js？

公式ドキュメント、特にcss3-mediaqueries.jsのドキュメントはまばらです。SO、フォーラム、ブログを読んで、これらの長所と短所を要約しました。

response.js

長所：

1. より信頼性が高い（？Modernizr、Twitter Bootstrap 3、H5BPが推奨）
2. 軽量（4kb）で高速
3. 任意のコンテキストでのメディアクエリの解釈（<link>、インラインCSS、@ import-ed CSS）

短所：

1. ウィンドウのサイズ変更時に更新されない
2. min-widthおよびのみをサポートmax-width
3. ユニットをサポートしていませんem（大きな弱点です！）

css3-mediaqueries.js

長所：

1. リアルタイムで反応します（サイズ変更でも！）
2. ユニットをサポートしemます（本当に？誰かがそれをテストしましたか？）

短所：

1. 重い（15kb）と遅い
2. 明示的に宣言されたメディアタイプを持つインラインCSSのみを解釈します
3. 詳細なドキュメントが不足しており、プロジェクトは放棄されているようです

---

誰かがリストに追加するポイント、共有する個人的な経験、またはいずれかのスクリプトの特定の好みを持っていますか？もしそうなら、なぜですか？

Answer 1

Mediatizrも含むテストページを作成しました。

興味のある方は、こちらのテストページをご覧ください。これらは結果です（IE8およびIE7でテスト済み）。

---

css3-mediaqueries.js

長所

1. サポートmin、maxおよびmin+maxメディアクエリ
2. サポートpxとem価値
3. ウィンドウのサイズ変更に反応します
4. ページ上のCSS（<style>）と外部スタイルシートを詳しく説明します

短所

1. widthメディアクエリをサポートしていません
2. スタイルシートを詳しく説明し<link media="screen and ...">たり@import編集したりしません

---

response.js

長所

1. サポートmin、maxおよびmin+maxメディアクエリ
2. サポートpxとem価値
3. ウィンドウのサイズ変更に反応します
4. 外部スタイルシートのみを作成

短所

1. widthメディアクエリをサポートしていません
2. ページ上のCSS<link media="screen and ...">や@importedスタイルシートを詳しく説明していません
3. jQueryイベントと組み合わせるとjavascriptエラーが発生する可能性がありますon load。これを解決するには、スクリプトをページの最後に配置する必要があります。

---

mediatizr.js

単に..動作しません

---

結局、 Modernizrが条件付きでロードされるcss-mediaqueries.jsを選択しました。

Answer 2

ポイントはおそらく今は議論の余地があります。メディアクエリを生成および管理する純粋なJavascriptフレームワークを開発しました。すべてのブラウザとオペレーティングシステムで動作します。フットプリントは500文字未満です。ここで機能していることがわかります：ieee-ac.org。