css - 响应式网页设计中的单个样式表与多个样式表

Question

简而言之:

在进行响应式网页设计时，您应该使用一个还是多个样式表？

详细说明:

在responsive design ，你往往有一个主要的 CSS block ，然后是其他点点滴滴，当它到达某些断点时调整布局。您可以通过以下两种方式之一构建代码:

单一样式表

/* 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 请求数量和文件大小的优缺点在实践中如何叠加？

Answer 1

样式表总是下载，无论当前媒体是什么，无论是screen、print 还是3D-glasses.

参见:Why do all browsers download all CSS files - even for media types they don't support?

考虑到这一点，将它们全部放在一个样式表中将减少 http 请求，而单独的样式表总是会创建更多请求而没有任何好处。