我有一个关于 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 请求？
最佳答案
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://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet
The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set.
为了最小化 HTTP 请求，将您的样式表合并到一个文件中并将它们包装在 @media (max-width:767px){ ... } 等中
关于html - CSS 媒体查询 http 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13808322/