4

次のリンク タグがあるとします。

<link rel="stylesheet" href="xlarge.css" media="max-width: 70em" />
<link rel="stylesheet" href="large.css" media="max-width: 60em" />
<link rel="stylesheet" href="medium.css" media="max-width: 50em" />
<link rel="stylesheet" href="small.css" media="max-width: 40em" />
<link rel="stylesheet" href="xsmall.css" media="max-width: 30em" />
<link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" />

最初の読み込みで、これら 6 つのスタイルシートすべてがダウンロードされますか、それともメディア クエリが true に解決されたスタイルシートだけがダウンロードされますか? たとえば、中程度のブレークポイントまで計算された Retina 対応のブラウザを使用していた場合、4 つの HTTP リクエストしか返されないでしょうか?

4

1 に答える 1

2

メディア クエリの評価が true か false かに関係なく、すべてのスタイルシートがダウンロードされます。最初の 5 つのメディア クエリでさえ、式を囲む括弧が欠落しているためすべて無効ですが、max-widthこれらのスタイルシートがブラウザによって要求されるのを防ぐことはできません。(無効なメディア クエリは、自動的に false に解決されます。)

CSS では、メディア クエリは、スタイルシート自体が要求されるかどうかではなく、それらのスタイルシートの CSS ルールがページに適用されるかどうかのみを制御します。

于 2012-12-23T21:46:21.390 に答える