html - 是否仍会下载带有解析为 false 的媒体查询的链接标签？

Question

给定以下链接标签：

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

在初始加载时，是否所有这六个样式表都已下载，或者只是那些媒体查询已解析为 true 的样式表？例如，如果我在一个支持视网膜的浏览器上计算到中等断点，它会只导致四个 http 请求吗？

Answer 1

无论媒体查询评估为真还是假，所有样式表都将被下载。即使您拥有的前五个媒体查询（由于表达式周围缺少括号而全部无效max-width）也不会阻止浏览器请求这些样式表。（无效的媒体查询只会自动解析为 false。）

在 CSS 中，媒体查询仅控制这些样式表中的 CSS 规则是否应用于您的页面，而不是样式表本身是否被请求。