19

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. 詳細なドキュメントが不足しており、プロジェクトは放棄されているようです

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

4

2 に答える 2

18

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を選択しました。

于 2012-10-25T11:28:43.900 に答える
-2

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

于 2015-10-13T03:59:21.160 に答える