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

Question

正如这篇文章所暗示的

http://www.456bereastreet.com/archive/201002/css_efficiency_tip_use_a_single_stylesheet_file_for_multiple_media/

还是针对不同媒体的不同外部 CSS 会是更好的选择？

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

Answer 1

组合样式表优点：

• 最佳/快速
• 压缩后尺寸减小良好
• 是的，更少的http请求

组合样式表缺点：

• 弄乱; 所有不同的样式表在一个地方
• 难以维护
• 可读性较差

Answer 2

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

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

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

Answer 3

您可以像这样使用依赖于媒体的 @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 负载，然后仅上传基于媒体所需的样式表。