响应式网页设计样式表 - 单个文件与多个文件

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 文件的多个 get 请求宽度。

您对此有何看法？我已经知道我最终会做出妥协。最重要的问题是“哪一个？”。

Answer 1

我通过测量我的特定代码确定，避免 HTTP 请求比下载额外的 gzip 压缩 CSS 更好。

使用http://www.webpagetest.org/ 之类的东西来测试这两个版本，这会让您对正在发生的事情有一个很好的了解。