CSS媒体查询http请求 [英] CSS media query http request

问题描述

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

例如：

 < link rel =stylesheethref =file.cssmedia =only screen and（max-width：640px）> 
< link rel =stylesheethref =file2.cssmedia =only screen and（max-width：960px）> 
< link rel =stylesheethref =file3.cssmedia =only screen and（max-device-width：480px）> 
  

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

解决方案

HTTP请求下载所有链接的样式表，无论其媒体属性是什么，因此：

 < link rel =stylesheethref =devices.cssmedia =only screen and（max-width：767px）> 
< link rel =stylesheethref =wides.cssmedia =all> 
  

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

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

要最小化HTTP请求，请将您的样式表合并到一个文件中，并将它们包装在 @media（max-width：767px）{...}

I have a question about CSS media queries. I'd like to know if CSS media queries affects the number of http requests on the web page.

For example:

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

My question is: From my understanding of CSS media queries, if the visitor of the web page is using one device/monitor then the other stylesheets don't apply. If the media query doesn't apply to the visitor, then does it still add an http request to the page?

解决方案

HTTP requests are made to download all stylesheets linked, regardless of what is in their media attribute, so:

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

would result in two HTTP requests. See section 4.12.5.11 of the working draft of the HTML5 spec for links: 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.

To minimize HTTP requests, combine your stylesheets into a single file and wrap them in @media (max-width:767px){ ... }, etc.

这篇关于CSS媒体查询http请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！