简而言之：

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

详细：

在响应式设计中，您倾向于拥有一个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请求数量和文件大小的优缺点如何叠加？