Do link tags with media queries that resolve to fa

问题:

Given the following link tags:

<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)" />

On initial load, are all six of these stylesheets downloaded, or just those that media queries have resolved to true? For instance, if I was on a retina-capable browser that calculated out to the medium breakpoint, would it only result in four http requests?

回答1:

All the stylesheets will get downloaded regardless of whether the media queries evaluate to true or false. Even the first five media queries you have, which are all invalid because of missing parentheses around the max-width expressions, won't prevent those stylesheets from being requested by the browser. (Invalid media queries simply resolve to false automatically.)

In CSS, media queries only control whether or not the CSS rules in those stylesheets are applied to your page, not whether or not the stylesheets themselves get requested.