CSS媒体查询http请求

Question

我有一个关于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请求？

Answer 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请求。对于links看到HTML5规范的工作草案的部分4.12.5.11：http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet

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

为了尽量减少HTTP请求，结合您的样式表成一个单一的文件，并在@media (max-width:767px){ ... }他们包裹等