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

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)" ...
   在这种特殊情况下，移动浏览器只会下载相关文件，但计算机浏览器可能会受到性能影响（目前我无法真正量化），原因是多个get请求处理与其屏幕匹配的所有css文件宽度。

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

Answer 1

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

使用类似http://www.webpagetest.org/的内容来测试这两个版本，这样可以让您了解正在发生的事情。