1

我一直在阅读有关响应式设计的信息，并将开始在我的网站上实施新的 CSS 设置。这让我开始思考调用所有这些不同 CSS 文件的最佳方式。对于不同的屏幕宽度，我会有不同的 CSS。

我正在讨论两种选择：

  1. 使用 LINK 标签连接到每个网页的所有文件。我唯一的问题是正在进行的维护（并且必须添加所有这些链接才能开始）；我知道这不是世界末日，但在维护方面似乎有点密集。

  2. 另一种方法是在每个网页上只有一个 LINK 标签，指向一个“feeder”CSS。这个'feeder' CSS 文件将包含所有使用@imports 指向我的其他CSS 文件的链接。这意味着维护将变得轻而易举。我可以在一个地方为整个站点添加/重新排序/删除 CSS 文件。伟大的！

然而，这会导致 @import 函数的兼容性[或在旧浏览器中缺少它]。

我环顾四周，我看到的文章至少有几年的历史了。

所以，要说到重点：现在 [2013 年 7 月] 正在使用的浏览器有多少百分比支持这一点，我可以放心地忘记那些无法解释 @import 的浏览器吗？

如果没有，我该怎么做才能将 CSS 文件的维护降至最低。（比“在当前站点上查找和替换”更优雅的东西）。

4

3 回答 3

7

不必担心@imports，您应该合并并缩小所有无法通过 CDN 提供的 CSS 文件：

<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" />

它会加载更快，占用更少的带宽，并且可以在任何支持样式表的浏览器上运行。

有很多方法可以做到这一点。如果您没有使用任何 Web 框架（或使用 Node.js），请查看Grunt。

至于您的实际问题，除非您打算支持早于 IE5.5 的浏览器，否则可以@import正常工作。但我强烈推荐缩小样式表的方法。

于 2013-06-04T22:52:20.557 回答
2

我实际上要说的是，现在在 2016 年接受的答案不一定是正确的答案——原因如下：

1) HTTP 2.0 正在成为中国以外工业化国家使用最多的协议版本（感谢旧的 IE），并且很快将被视为行业标准（如果还没有的话）。这意味着对连接多路复用和标头缓存的支持消除了将文件合并为一个的需要；事实上，在去年 SFO 的 Fluent Conference 上，HTTP2 的演讲者实际上认为，将 CSS 和图像等内容拆分为多个文件实际上会更好，因为 HTTP 能够利用更长的连接时间来利用更多的带宽。

2) 由于 CSS 中的所有这些前端自动化（如 SASS 和 LESS），您最终更有可能打破 IE 5-9 4095 选择器的限制。这是一个鲜为人知的错误，因为直到现在人们很少在单个工作表中超过该数量的选择器；但是，在企业站点上，这已成为普遍现象。基本上，任何超过 4095 个选择器的工作表仍将被读入，但是浏览器将在此之后默默地无法呈现任何规则。

这并不是说压缩成一个文件不好，但是，另一种拆分方法实际上也不再不好，事实上，在某些情况下，根据项目需要，要么是必要的，要么甚至更好。

于 2016-01-11T21:31:45.553 回答
0

以下是有关浏览器的一些统计信息http://www.w3schools.com/browsers/browsers_stats.asp

对于响应式 css，我会使用媒体查询，它不会影响旧版浏览器，并且适用于需要响应式 css 的设备（移动设备）

http://css-tricks.com/css-media-queries/

于 2013-06-04T22:54:26.613 回答