在一个 css 文件中为所有 @media 定义 css 更好吗？答案

【问题标题】：Is it better to define css for all @media in one css file?在一个 css 文件中为所有 @media 定义 css 更好吗？
【发布时间】：2011-01-21 17:22:13
【问题描述】：

正如本文所暗示的

或者针对不同媒体使用不同的外部 CSS 会是更好的选择？

在可维护性、网站性能方面。

【问题讨论】：

多个 css 文件总是会降低您网站的性能。将它们结合起来可以减少 http 请求。
@rockinthesixstring - 但请参阅我的另一个问题的尼克回答stackoverflow.com/questions/2083900/…
您使用的是什么技术？直截了当的 HTML、PHP、ASP.NET、其他？
我使用 ASP.NET 并构建了一个处理程序，它结合了服务器站点上的所有 CSS（发送单个 CSS 文件并缓存它）。我根据页面请求是否需要将我的 CSS 动态添加到处理程序中。

【解决方案1】：

您可以像这样使用依赖于媒体的@import 规则：

@import url("print.css") print;
@import url("projection.css") projection, tv;

它应该适用于除 IE5-7 之外的所有应用程序（根据：http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific）我无法测试 IE8，所以你可能也会对那里感到失望。

这将导致非常小的初始 CSS 加载，然后根据媒体仅上传所需的样式表。

【讨论】：

【解决方案2】：

组合样式表的优点：

组合样式表缺点：

【讨论】：

【解决方案3】：

基本上，如果您可以基于媒体以编程方式将 CSS 文件添加到您的客户端（只要您最后只发送一个 css 文件），那么可以，基于 @media 构建多个 CSS 文件。

如果您不能以编程方式添加 css，那么我建议将它们组合成一个 css 文件（因为无论如何您都必须将它们全部发送给客户端），从而减少客户端的 http 请求数量。

更少的 http 请求 = 更快的页面加载。

【讨论】：