2

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のどちらが必要ですか?

4

1 に答える 1

7

同様の (回答済みの) 質問はこちら: Twitter Bootstrap 320andup の実装

css-mediaqueries-js を捨てて、メディア タイプがなくても満足できる Respond.jsを採用しました。

どちらのアプローチが「正しい」かについての私の質問はまだ残っていますが、それは実装の問題というよりも標準の問題です。私は、メディアタイプが必須ではないという現在のブラウザのアプローチが勝つ可能性が高いと考えています. これは、これを処理するために css3-mediaqueries-js を更新する必要があることを意味します。

これについて意見を述べてくれた Christian Müller に感謝します。

于 2012-05-24T14:28:10.760 に答える