Question

我正在尝试使用此处讨论的CSS3媒体查询技术......

http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

如果我从下面获取代码并使用某种模拟器在新页面上运行它，该模拟器将自身标识为具有小屏幕的设备（例如Device Central或Protofluid），我可以在Charles中看到仍然发出请求对于每个CSS文件，即使拾取了正确的样式表，这是正常的行为吗？

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

Answer 1

是的，将下载链接元素中的所有样式表并动态评估媒体查询。例如，当有人转动他们的设备时，你需要应用样式表ipad-landscape.css和ipad-portrait.css，你不想等到他们这样做才开始下载样式表和任何引用的项目，它应该马上做好准备唯一的例外是（或可能是）备用样式表。

此处理模型为discussed in the HTML5 spec：

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

使用CSS3媒体查询时减少HTTP请求

1 个答案: