使用 CSS3 媒体查询时减少 HTTP 请求
我正在尝试使用此处讨论的 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)">
I'm trying to use the CSS3 media query techniques discussed here...
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
If I grab the code from below and run it on a new page using some sort of emulator that identifies itself as a device with a small screen (e.g. Device Central or Protofluid) I can see in Charles that a request is still made for each CSS file even though the correct stylsheet is picked up, is this normal behaviour?
<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)">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，链接元素中的任何样式表都将被下载，并动态评估媒体查询。例如，当有人转动设备时，您需要应用样式表
ipad-landscape.css和ipad-portrait.css，您不想等到他们执行此操作即可开始下载样式表和任何引用的项目，它应该立即准备就绪。唯一的例外是（或可能是）替代样式表。其处理模型讨论过在 HTML5 规范中：
Yep, any stylesheets in a link element will be downloaded and the media queries evaluated dynamically. For instance your stylesheets
ipad-landscape.cssandipad-portrait.csswould need to be applied when someone turns their device round, you don't want to wait until they do that to start downloading the stylesheet and any referenced items, it should be ready right away. The only exception is (or could be) alternate stylesheets.The processing model for this is discussed in the HTML5 spec: