19

response.jsまたはcss3-mediaqueries.js

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

response.js

長所:

  1. より信頼性が高い(?ModernizrTwitter Bootstrap 3H5BPが推奨
  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. サポートminmaxおよびmin+maxメディアクエリ
  2. サポートpxem価値
  3. ウィンドウのサイズ変更に反応します
  4. ページ上のCSS(<style>)と外部スタイルシートを詳しく説明します

短所

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

response.js

長所

  1. サポートminmaxおよびmin+maxメディアクエリ
  2. サポートpxem価値
  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 に答える