1

CSS メディア クエリを使用して、最大幅に応じて、desktop.css と mobile.css という 2 つの異なる CSS を適用すると、実際にはどのように機能しますか?

両方の CSS が常にブラウザーによって読み込まれ、クライアント側で実際の CSS が適用されますか、それともブラウザーは関連する CSS のみを読み込むのに十分なほどインテリジェントですか?

4

3 に答える 3

2

実際のメディア クエリを使用している限り、ページの読み込み時にすべての CSS が読み込まれます。これは、メディア クエリをサポートするすべてのブラウザのデフォルトの動作です。これらのブレークポイントに到達するまで、またはルールが満たされるまで (ブレークポイント メディア クエリを使用していない場合)、CSS は適用されません。

メディア クエリの動作を模倣する JavaScript を使用している場合、それはまったく別の球技であり、それがどのように記述されているかによって、CSS が読み込まれるかどうかに依存します。

コード例は、ここで有効な答えを判断するのに役立ちますが、私が知る限り、最初のステートメントは正しいです。ブラウザーは常にすべての CSS を読み込み、その時点で使用されているビューポート/デバイスに基づいて関連するもののみを適用します。

于 2013-01-09T17:20:54.550 に答える
0

すべての CSS をロードし、通常の CSS 階層を介して適用します。

于 2013-01-09T17:10:15.373 に答える
0

それはすべて、CSS を定義する方法と場所によって異なります。さまざまなメディア クエリに基づいて画像を読み込む方法については、このページを参考にしてください。

ただし、基本的には、メディア クエリに基づいて CSS を条件付きで読み込む場合、そのメディア クエリが満たされるまで CSS は読み込まれません。

于 2013-01-09T17:14:58.790 に答える