0

スマッシング マガジン (テクニック 3) に関するかなり古い記事があり、次のようにメディア クエリを開始すると、次のようになります。

@media screen, all and (min-width: 300px)

メディア クエリを理解するブラウザは、メディア クエリ全体を理解します。古いものほど、「all and」の後のすべてを無視します。したがって、理論的には、より古い ie はクエリ内のすべてを表示します。これは驚くほど ie6 と ie7 に当てはまりますが、残念ながら ie8 はクエリ内のすべてのルールを無視します。

残念です

Jeremy Keithの例を使用して同様のことを行うことができます。この例では、レイアウトを別のスタイル シートに移動し、条件付きコメントを使用してこれを古い IE に提供します。

このアプローチの問題は、CSS モジュールが別々のスタイル シートに分割されていることです。これは、OOCSS と SMACSS の原則に反します (これらは非常に便利です!)。

誰かがそれを解読しようとしたJS Fiddle がありますが、これを行う方法について何かアイデアがあるかどうか疑問に思っていますか?

4

1 に答える 1

0

私を解決に導いたコメントについて@cimmanonに感謝します。

私が持つことができる.lessを使用する

global.less - これには、すべてのブレークポイントを含むすべての CSS が含まれています。ブレークポイントは少ない変数として設定されます。コンパイルされた.less-これはglobal.lessをインポートしてcssファイルにコンパイルします Compiled-belowie8-これはglobal.lessをインポートしてcssファイルにコンパイルしますが、最も広いレイアウトのメディアクエリ変数を「なし」に変更したので、これでメディアクエリはありません。

次に、条件付きコメントを使用して、compiled.css を除くすべてのブラウザーに提供しました。

于 2012-11-23T14:51:16.617 に答える