CSS媒體查詢http請求

Question

我有一個關於CSS媒體查詢的問題。我想知道CSS媒體查詢是否影響網頁上的http請求數。

例如：

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

我的問題是：從我的CSS媒體查詢的理解，如果網頁的訪問者使用一個設備/顯示器那麼其他樣式表不適用。如果媒體查詢不適用於訪問者，那麼它是否仍然向頁面添加一個http請求？

Answer 1

HTTP請求，以下載鏈接的所有樣式，無論是什麼在他們media屬性，因此：

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

會導致兩個HTTP請求。對於links看到HTML5規範的工作草案的部分4.12.5.11：http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet

適當的時間，以獲得資源爲外部資源鏈接創建時或當其元素插入到文檔中，發生爲準持續。如果資源是替代樣式表，那麼用戶代理可以推遲獲取資源，直到它成爲首選樣式表集的一部分。

爲了儘量減少HTTP請求，結合您的樣式表成一個單一的文件，並在@media (max-width:767px){ ... }他們包裹等