Twitterのブートストラップフレームワークに基づいた新しいレスポンシブWebプロジェクトを開始し(同時にLESS学習曲線に着手)、IEとメディアクエリで問題が発生しました。IE7と8はメディアクエリをサポートしていないため、CSs3-mediaqueries-jsポリフィルスクリプトのコピーを取得して、IEが応答して動作を開始するようにしました。うまくいきませんでした:-(
多くの頭を悩ませた後、私は問題をメディアクエリ構文に絞り込みました。Bootstrapのメディアクエリは次のとおりです。
@media (max-width: 480px) { ... } // Landscape phones and down
@media (max-width: 767px) { ... } // Landscape phone to portrait tablet
@media (min-width: 768px) and (max-width: 979px) { ... } // Portrait tablet to landscape and desktop
@media (min-width: 1200px) { ... } // Large desktop
@media
スクリプトは、と式の間にメディアタイプ(screen、handheld、allなど)があることを想定しているため、これらはcss3-mediaqueries-jsによって正しく解析されないことがわかります。(...)
次に例を示します。
@media all and (max-width: 480px) { ... }
問題は、ブートストラップとcss3-mediaqueries.jsのどちらが正しいかということです。W3C仕様(http://www.w3.org/TR/css3-mediaqueries/#media0)は、css3-mediaqueries.jsが正しく、ブートストラップが間違っていると述べています。
メディアクエリは、メディアタイプと、特定のメディア機能の状態をチェックする0個以上の式で構成されます。
少し信頼性の低い情報源(Russ Weakly)は、反対のことを言っています。
メディア機能は、メディアタイプまたはキーワードなしで使用できます。メディアタイプは「すべて」と見なされます。(スライド42)
さらに重要なことに、これはメディアクエリをネイティブにサポートするブラウザの動作です。
では、修正、ブートストラップ、またはcss-mediaqueries-jsのどちらが必要ですか?