可忽略。

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 +线型样板吗？浏览器可以非常快速地加载它，无论它们是否组合在一起都不应该有所不同。

真正的不同之处在于你。使其成为你开发的高效率。就我个人而言，我觉得它们看起来更适合在相关风格旁边而不是在底部。但请注意，较新的样式会覆盖较旧的样式，这可能是在底层对媒体查询进行分组的做法。

Answer 2

除非您将代码及时发送回AOL拨号日，否则不会对性能/处理时间产生任何明显影响。

话虽如此，不要忘记你的操作顺序。您必须小心不要覆盖媒体查询。将它们全部保存在样式表的末尾有助于防止这种情况发生，并确保您的媒体查询处于级联的末尾。

在一个样式表中使用多个CSS媒体查询会产生什么影响？

2 个答案:

可忽略。