web-dev-qa-db-ja.com

css3-mediaqueries.js VS respond.js

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

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

respond.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のみを で明示的に宣言されたmedia-type で解釈します
  3. 詳細なドキュメントがなく、プロジェクトは中止されたようです

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

javascriptcssmedia-queriespolyfills
19
Giona

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

誰かが興味を持っている場合は、 これはテストページです であり、これらは results です（IE8およびIE7でテスト済み）。

css3-mediaqueries.js

長所

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

短所

  1. width mediaqueryをサポートしていません
  2. <link media="screen and ...">も@importedスタイルシートも詳しく説明していません

respond.js

長所

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

短所

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

mediatizr.js

単に..動作しません

最終的に私はcss-mediaqueries.jsを選択し、条件付きで Modernizr をロードしました。

18
Giona