css - CSS 媒体查询有多慢？

Question

当我组织我的 CSS 时，我喜欢把相关的样式放在一起(页眉样式在一个部分，页脚样式都在同一个地方，等等)(对不起，OOCSS 拥护者)。

我最近一直在试验针对更小/更大屏幕的媒体查询。为了与我的组织方案保持一致，我必须在代码的每个部分中包含针对每个目标屏幕尺寸的单独查询。 (因此，例如，如果我支持七种不同的屏幕尺寸，我的“页眉”CSS 将有七个不同的媒体查询，然后在“页脚”部分有七个查询，等等)

撇开我是否应该这样做的问题，拥有如此多的媒体查询 block 是否有任何技术后果？ (它们都是 min-width、max-width 或两者兼而有之。假设我有 100 个不同的查询，但我只检查了 7 个不同的尺寸一遍又一遍。)浏览器会花费更长的时间来解析吗？

Answer 1

处理可能较慢路径的代码在现代浏览器中已经过大量优化，因此您不需要预先优化此类事情，除非您确实必须使用手头的分析数据。继续写吧。