Respond
1.4.2
著作権 2011: Scott Jehl、scottjehl.com
MITライセンスに基づいてライセンスされています。
このスクリプトの目的は、CSS3 メディア クエリをサポートしていないブラウザ (特に Internet Explorer 8 以前) でレスポンシブ Web デザインを有効にする、高速で軽量な (3kb 縮小 / 1kb gzip 圧縮) スクリプトを提供することです。これは、おそらくサポートしていない他のブラウザーにもパッチを当ててサポートするように書かれています (詳細については近日中にお知らせします)。
レスポンシブ Web デザインに関する概念に詳しくない場合は、こことここを読んでください。
デモ ページ (メディア クエリが動作していることを示すために色が変わります)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}すべての CSS の後で、response.min.js スクリプト (1kb 分/gzip 形式) を参照します (実行が早ければ早いほど、メディア化されていないコンテンツのフラッシュが IE ユーザーに表示されなくなる可能性が高くなります)。
Internet Explorer を開き、拳を突き上げて喜びます
Respond.js は、AJAX 経由で CSS の元のコピーをリクエストすることで機能するため、スタイルシートを CDN (またはサブドメイン) でホストする場合は、古い IE ブラウザ用の CSS をリクエストするためにローカル プロキシを設定する必要があります。以前のバージョンでは、非推奨の x-domain アプローチが推奨されていましたが、クロスドメインの制限を回避するには、(パフォーマンスとセキュリティ上の理由から) ローカル プロキシの方が推奨されます。
留意すべき注意事項:
このスクリプトの焦点は意図的に非常に狭くなっています。最小幅と最大幅のメディア クエリとすべてのメディア タイプ (画面、印刷など) のみが、サポートされていないブラウザに変換されます。ファイルサイズ、メンテナンス、パフォーマンスをシンプルに保ちたかったので、(モバイルファーストの) レスポンシブデザインの構築に不可欠なクエリへのサポートを意図的に制限しました。将来的には、追加のメディア クエリ機能をパッチインするためのフックを含めるために少しやり直す可能性があります。ご期待ください。
CSS3 メディア クエリをネイティブにサポートするブラウザは、できるだけ早くこのスクリプトの実行をオプトアウトします。サポートのテストでは、スクリプトの実行に進む前に、他のすべてのブラウザーがメディア クエリをサポートしているかどうかを判断するための簡単なテストが行われます。このテストは上部に個別に含まれるようになり、https://github.com/paulirish/matchMedia.js にある window.matchMedia ポリフィルを使用します。 Modernizr などを介してこのポリフィルをすでにインクルードしている場合は、その部分を自由に削除してください。
このスクリプトは (付属の matchMedia ポリフィルを除いて) 他のスクリプトやフレームワークに依存せず、モバイル配信用に最適化されています (gzip あたりの合計ファイルサイズは最大 1kb)
ご想像のとおり、この実装は CSS 解析ルールに関しては非常に愚かです。これにより非常に高速に実行できるため、これは良いことですが、緩みにより予期しない動作が発生する可能性もあります。たとえば、ルールを無効にする目的でメディア クエリ全体をコメントで囲んだ場合、メディア クエリをサポートしていないブラウザではそれらのルールが有効になってしまう可能性があります。
Respond.js は、@import 経由で参照される CSS を解析しません。また、スタイル要素内のメディア クエリは解析のために再リクエストできないため、機能しません。
セキュリティ制限により、一部のブラウザでは、このスクリプトが file:// URL で動作することを許可されない場合があります (xmlHttpRequest を使用するため)。 Web サーバー上で実行します。
MQ 固有のスタイルを含む CSS ファイルに対するリクエストがリダイレクトの背後にある場合、Respond.js はサイレントに失敗します。 CSS ファイルは 200 ステータスで応答する必要があります。
現在、リンク要素のメディア属性はサポートされていますが、これはリンクされたスタイルシートにメディア クエリが含まれていない場合に限られます。クエリが含まれている場合、メディア属性は無視され、内部クエリは通常どおり解析されます。つまり、CSS 内の @media ステートメントが優先されます。
報告によると、CSS ファイルが Byte-Order-Mark (BOM) を使用して UTF-8 でエンコードされている場合、IE7 または IE8 の Respond.js では機能しません。第97号に記載
警告: メディア クエリ内に @font-face ルールを含めると、IE7 および IE8 が読み込み中にハングアップします。これを回避するには、@font-face ルールを他のメディア クエリの兄弟として広く公開します。
32 を超えるスタイルシートが参照されている場合、IE はエラーInvalid procedure call or argumentをスローします。 CSS を連結すると、問題は解決するはずです。
Sass/SCSS ソース マップはサポートされていません。 @media -sass-debug-info respond.js を壊します。第148号に記載
Internet Explorer 9 は CSS3 メディア クエリをサポートしますが、メディア クエリを含む CSS が外部ファイルにある場合はフレーム内ではサポートされません (これは IE9 のバグのようです — https://stackoverflow.com/questions/10316247/media-queries を参照してください) -fail-inside-ie9-iframe)。この問題が発生した場合は、このコミットを参照して修正を行ってください。 https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
ネストされたメディア クエリはサポートされていません
基本的に、スクリプトはページ内で参照されている CSS をループし、コンテンツに対して 1 つまたは 2 つの正規表現を実行して、メディア クエリとそれに関連する CSS ブロックを検索します。 Internet Explorer では、スタイルシートのコンテンツを解析前の状態で取得することは不可能です (IE 8 では、メディア クエリがテキストから削除されていることを意味します)。そのため、Respond.js は Ajax を使用して CSS ファイルを再リクエストし、そこからのテキスト応答を解析します。この再リクエストが実際にはサーバーに送信されず、代わりにブラウザーのキャッシュにアクセスしないように、CSS ファイルのキャッシュを適切に設定してください。
そこから、各メディア クエリ ブロックがスタイル要素を介して head に順番に追加され、それらのスタイル要素は、最小/最大幅がブラウザーの幅とどのように比較されるかに応じて有効または無効になります (つまり、DOM に追加および削除されます)。スタイル要素のメディア属性は CSS のクエリの属性と一致するため、「スクリーン」、「プロジェクター」など、任意の属性を指定できます。 CSS に含まれる相対パスにはスタイルシートの href が接頭辞として付けられるため、画像パスは適切な宛先に誘導されます。
確かに、カップルは：
存在する CSS3 メディア クエリ ポリフィル スクリプトはこれだけではありません。でもそれが一番速いかもしれない。
より堅牢な CSS3 メディア クエリのサポートをお探しの場合は、https://code.google.com/p/css3-mediaqueries-js/ をチェックしてください。テストでは、このスクリプトは複雑なレスポンシブ デザイン (ファイルサイズとパフォーマンスの両方の点で) をレンダリングするときに著しく遅いことがわかりましたが、実際にはこのスクリプトよりもはるかに多くのメディア クエリ機能をサポートしています。著者の方々に心から感謝します。 :)
