7

大きな CSS ファイルがあり、メディア クエリを使用する特別な場合に備えて、他の CSS ファイルを含めたいと考えています。

@import次のように CSSで使用しても安全ですか。

@media only screen and (max-width: 480px) {    
    @import url('/css/styles-480.css');    
}
4

2 に答える 2

15

@importルール内に を持つことは有効ではない@mediaため、あなたが持っているものは機能しません。

これを行う正しい方法はさらに簡単です。@importそれ自体が URL の後にメディア クエリを受け入れます。

@import url('/css/styles-480.css') only screen and (max-width: 480px);

この構文は、メディア タイプで使用するために CSS2.1 で導入されましたが、メディア タイプからの直接の拡張であるため、メディア クエリも機能します。

@importルールはスタイルシートの先頭にしか存在できないことに注意してください。

読み込みのパフォーマンスが気になる場合は、 Asad で示されているように、<link>の代わりにページ ヘッドで別の要素を使用して、このスタイルシートを参照することをお勧めします。ただし、どちらの方法でも問題なく動作します。@import

于 2013-01-02T15:29:09.673 に答える
4

CSS ファイル内でインポートする代わりに、必要に応じて CSS ファイルを並行してダウンロードすることをお勧めします。

<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />

を使用する際の問題@importは、2 番目のファイルは、含まれている CSS ファイル@importが完全にダウンロードされて解析された後にのみダウンロードされることです。すべてのルールを上書きするか一部のルールを上書きするかに関係なく、ファイルを順番にロードしないため、この方法の方が高速です。

于 2013-01-02T15:33:06.000 に答える