css - 在一个样式表中包含多个 CSS 媒体查询有什么影响？

Question

我有一个非常大且复杂的样式表。由于我构建样式组织的方式，对我来说，在整个样式表中加入一些针对较小分辨率的媒体查询是有意义的，而不是像我通常看到的那样在最后将它们全部组合在一起。

例如，这是我的意思的一些伪代码:

.navbar { width: 300; height: 20px; background: gray; }
.navbar ul { etc etc }
@media screen and (max-width: 800px) {
    .navbar ul { something to make it smaller..... }
}

.....30 some-odd lines later....

#contentblock { some styles }
@media screen and (max-width: 800px) {
   #contentblock a { something that makes this one smaller and stuff }
}

^^希望一切都有意义。

我的问题是:虽然我可以这样做，但它会显着影响加载/处理时间吗？它是应该通过将所有媒体查询分组在工作表底部来避免的内存消耗，还是为了我自己的方便，我可以继续进行并尽可能减少负面影响？

Answer 1

可以忽略不计。

你没见过大网站和他们的 30k+ 行样式表吗？浏览器可以非常快速地加载它，它们是否分组在一起应该没有什么区别。

真正的不同在于您。让它对你 的发展是有效的。我个人认为将它们放在相关样式旁边而不是底部看起来更好。但请注意，较新的样式会覆盖较旧的样式，这可能是将媒体查询分组在底部的做法的来源。