使用CSS3媒體時，減少HTTP請求查詢

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：

的適當的時間，以獲得被創建或當它的元件被 插入到文檔當外部資源 鏈路 資源是，取其 發生最後。如果資源是 備選樣式表，則用戶代理可以推遲獲得資源 ，直到它成爲首選 樣式表集的一部分。