單VS多個樣式表在響應網頁設計

你應該使用一個或多個樣式表做響應的網頁設計是什麼時候？

詳細：

在responsive design，你往往有CSS的一個主要塊，那麼其他的點點滴滴，當它達到一定斷點來調整佈局。你可以組織你的代碼的方式有兩種：

單樣式

/* Main CSS */ 

@media only screen and (min-width: 480px) { /* CSS */ } 
@media only screen and (min-width: 640px) { /* CSS */ } 
@media only screen and (min-width: 800px) { /* CSS */ }

多個樣式表

<link rel="stylesheet" media="screen" href="main.css"> 
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css"> 
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css"> 
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

看來，使用一個樣式表將減少HTTP請求的數量，但您將擁有一個較大的文件，其中將包含某些客戶端可能不會使用的代碼。多個樣式表似乎可以縮小文件大小，但是您有更多的HTTP請求。

什麼時候應該選擇每種方法？ HTTP請求數量和文件大小的優缺點在實踐中如何堆積起來？

來源

2011-12-28 Philip Morton

需要更長的時間，處理HTTP請求（往返）還是處理超過必需的CSS文件？ – 2011-12-28 19:20:46

大多數樣式表中的文件大小相對較小。即使是50K的大型css文件也可能是您在性能優化方面最擔心的問題。 – 2011-12-28 19:27:23

樣式表總是下載，不管當前的媒體，無論是screen，print，或3D-glasses。

請參見：Why do all browsers download all CSS files - even for media types they don't support?

與

所以在心中，讓他們都在同一個樣式表將減少HTTP請求，其中作爲獨立的樣式表將始終創建而沒有益處更多的請求。

來源

2011-12-28 19:25:27

+14

爲了理智，您可以在推送代碼之前使用單獨的文件進行開發，並將它們作爲構建過程的一部分進行連接/最小化。請參閱：http://stackoverflow.com/questions/702907/what-are-some-good-css-and-js-minimizers-for-production-code – calvinf 2011-12-28 19:38:03

HTTP開銷仍然是HTTP/2的問題？ https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/#concatenating-css-and-javascript – user1857711 2017-03-04 15:00:19

單VS多個樣式表在響應網頁設計

回答

相關問題