2

我有一个关于 CSS 媒体查询的问题。我想知道 CSS 媒体查询是否会影响网页上的 http 请求数。

例如：

<link rel="stylesheet" href="file.css" media="only screen and (max-width: 640px)">
<link rel="stylesheet" href="file2.css" media="only screen and (max-width: 960px)">
<link rel="stylesheet" href="file3.css" media="only screen and (max-device-width: 480px)">

我的问题是：根据我对 CSS 媒体查询的理解，如果网页的访问者正在使用一个设备/监视器，那么其他样式表不适用。如果媒体查询不适用于访问者，那么它是否仍向页面添加 http 请求？

4

1 回答 1

1

发出 HTTP 请求以下载所有链接的样式表，而不管它们的media属性是什么，所以：

<link rel="stylesheet" href="devices.css" media="only screen and (max-width : 767px)">
<link rel="stylesheet" href="wider.css" media="all">

将导致两个 HTTP 请求。请参阅 HTML5 规范工作草案的第 4.12.5.11 节：http links: //www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet

获取资源的适当时间是创建外部资源链接或将其元素插入文档时，以最后发生的为准。如果资源是替代样式表，则用户代理可以推迟获取资源，直到它成为首选样式表集的一部分。

为了最大限度地减少 HTTP 请求，请将您的样式表组合到一个文件中并将它们包装在@media (max-width:767px){ ... }等中。

于 2012-12-10T20:10:11.980 回答