響應式網頁設計樣式表 - 單個或多個文件

Question

我目前正在研究優化即將推出的html5響應式網站的不同方法。我最終看着Andy Clarke的320 and up project，我覺得這很有趣。

雖然這看起來像是一個非常簡潔的想法，可以改善移動瀏覽器的加載時間，但我無法完全弄清楚將所有媒體查詢放在一個大css文件中或將它們分成不同屏幕的不同文件寬度閾值。

正如我直到現在看到的那樣，在任何情況下，我都無法儘可能多地優化樣式表。這裏是場景：

1. 我把所有的媒體查詢放在一個大的CSS文件。儘管移動瀏覽器的相關代碼僅在文件的第一個季度，但文件會完全下載，因此會浪費相當多的帶寬。

2. 我分裂樣式表分成多個文件（即會有320.css，480.css，786.css等），並與沿東西線部份的
   <link rel="stylesheet" media="only screen and (min-width: 480px)" ...
   宣佈他們每個人的頭 在這種特殊情況下，移動瀏覽器只會下載他們的相關文件，但計算機瀏覽器可能會因爲多次獲取請求處理所有與其匹配的css文件而導致性能下降（我目前無法量化）屏幕寬度。

你對此有何看法？我已經知道我最終會做出妥協。底線問題將是「哪一個？」。

Answer 1

我通過測量我的特定代碼來避免HTTP請求比下載額外的gzip CSS更好。

使用像http://www.webpagetest.org/這樣的東西來測試兩個版本，這會給你一個很好的想法。