我正在尝试使用此处讨论的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)">
答案 0 :(得分:0)
是的,将下载链接元素中的所有样式表并动态评估媒体查询。例如,当有人转动他们的设备时,你需要应用样式表ipad-landscape.css
和ipad-portrait.css
,你不想等到他们这样做才开始下载样式表和任何引用的项目,它应该马上做好准备唯一的例外是(或可能是)备用样式表。
此处理模型为discussed in the HTML5 spec:
获得适当的时间 资源是外部资源的时候 链接已创建或其元素是 插入文档中,以其中任何一个 发生在最后。如果资源是 替代样式表然后用户 代理可以推迟获取资源 直到它是首选的一部分 样式表集。