0

最近、サポートしていない古いブラウザーのフォールバックをサポートしながら、メディア クエリを使用する方法について質問しました。唯一の答え (動作中) は、adapt.js などの JavaScript を使用して、ロードするスタイルシートを決定することでした。

私はいじくり回してきましたが、とにかくIE7で私のために働いた信じられないほど単純な解決策が次のとおりであることに気付きました:

.wrapper{width:1024px;}

@media all and (min-width: 1025px) {
    .wrapper{width:1024px;}
}

@media all and (max-width: 1024px) {
    .wrapper{width:1024px;}
}

@media all and (max-width: 900px){
    .wrapper{width:900px;}
}

上記は本当に簡単な例です。いじっていると、.wrapper IE7 のデフォルト値を指定してレンダリングし、メディア クエリを無視したことに気付きました。Chrome/FF/Safari では、メディア クエリ css を使用しました。これにより、これは javaascript と互換性のある回避策になる可能性があると思いますが、ブラウザの互換性や SEO に影響があるかどうかはわかりません。

これは実装するのに悪い方法ですか?互換性の問題はありますか? すべての css を 1 つのファイルにまとめるというアイデアが気に入っています。

任意の考えをいただければ幸いです、ありがとう!

4

1 に答える 1

0

メディア クエリの順序付けはmax-width、カスケードにより、このルールが完全に不要になることを意味します。@mediaこのルールのスタイルを、独自のブロックにない最初のルールとは異なるものにするつもりでない限り、それを削除できます。

@media all and (min-width: 1025px) {
    .wrapper{width:1024px;}
}

それ以外に、影響や互換性の問題は見られません。@mediaこれは、ルールを使用したメディア クエリの使用方法とほぼ同じです。

于 2012-10-09T03:36:48.683 に答える