Question

如果我在单个CSS文件中包含所有媒体类型，例如

以下是style.css

的内容

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

@media print {
 /* Style adjustments for Print go here */
}

如果我在具有@media only screen and (min-width: 480px)的设备上打开文件，浏览器下载是否会下载@media print和min-width: 768px的CSS部分？

或浏览器将在设备上下载整个css，即使它永远不会在同一设备上使用。例如，在两个方向上具有最大width 480px的设备将永远不需要为具有大于480px宽度或高度的设备编写的CSS代码，即使CSS被高速缓存也是如此。这没用？

是否为每种媒体使用单独的CSS文件以获得最佳性能？

哪些可以提高性能，HTTP请求或设备所需的单独且仅需要的代码？

Answer 1

看到总大小将大致相同，但您将请求数量从1增加到3，我建议您将它们全部放在一个文件中。

浏览器将 所有3个 CSS文件的完整尺寸 。

Answer 2

Mobile Boilerplate将它们全部放在同一个CSS文件http://html5boilerplate.com/mobile中，但我看到其他响应式设计使用多个文件。

我猜其中一个问题是不同分辨率之间有多少共同/不同？

单个文件可能更容易管理，并且可以通过gzip确保它可以克服更多的额外大小。

您在上面的示例中没有使用max-width，因此480px的样式也将用于768px（除非过度使用） - 这是您的意图吗？

Answer 3

最好将所有CSS代码放在一个文件中。如果您在CSS文件标记内部使用媒体查询，大多数浏览器将加载所有CSS文件。我在Chrome，FF，IE中测试过它。您加载的CSS文件越多，您拥有的HTTP请求就越多。

在我看来，当你想要使用单独的CSS文件的唯一情况是使用这些html标签的IE浏览器（不仅仅是）的CSS（例子）：

<!--[if lt IE 7 ]> <link rel="stylesheet" href="ie7.css" /> <![endif]-->

在这里你仍然使用另一个HTTP请求，假设用户将在宽带或WiFi连接上使用IE7，它不会对你的用户造成太大伤害。

在主CSS文件中使用@import加载其他文件也需要更多的HTTP请求。

好的做法是很好地组织CSS代码，因此不要为相同的类/ ID重复样式。

如果你有非常复杂的CSS代码，你可以使用SASS或LESS等工具，或者你总是可以使用CSS Compressor或Minify CSS缩小你的CSS代码。

Answer 4

如果您可以通过检查用户代理来尝试仅在页面中包含所需的* .css文件。

这将为用户提供所需的下载，并且在您的情况下效率最高。请记住给每个“媒体”提供一个文件。

所有@media的单个CSS文件与每个@media的单独CSS文件

4 个答案: