Question

假设有1个css文件和3个@media格式，请说：

@media (min-width:1280px)
@media (min-width:640px) and (max-width:1279px)
@media (max-width:639px)

在使用每种@media格式之间是否存在显着的性能差异，并在其中填写所有适当的CSS规则，例如：

@media (min-width:1280px) {
  /* all css for this format */
}

@media (min-width:640px) and (max-width:1279px) {
  /* all css for this format */
}

@media (max-width:639px) {
  /* all css for this format */
}

VS

根据需要使用尽可能多的@media声明（大约和CSS规则/部分一样多）......例如：

div.some-class-name {
  /* styles */
}

@media (min-width:1280px) {
  div.some-class-name {
    /* styles for this format */
  }
}

@media (min-width:640px) and (max-width:1279px) {
  div.some-class-name {
    /* styles for this format */
  }
}
@media (max-width:639px) {
  div.some-class-name {
    /* styles for this format */
  }
}

我个人更喜欢第2版（虽然可能不那么过分），因为为每个@media查询跟踪特定的一对样式要容易得多。

请求反馈！

Answer 1

我不是这方面的专家，但我发现了一篇很好的文章来解决这个问题：

https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/

如果您在代码中使用一个大型或多个媒体查询，假设您的值大多相同，则无关紧要。对于数百个媒体查询中的每个（！），您的值是否不同可能无关紧要，但可能会影响性能（无法跟踪此情况）。我在这里唯一可以补充的是，使用许多内联媒体查询通常是因为它们增加了CSS的大小（除非你的gzipping）并且因为加载阻塞而影响性能。

对我有意义。我个人喜欢对元素样式进行分组而不是对媒体查询进行分组（问题中的版本2）。在我看来，CSS的目标是为你的元素设计风格，并根据屏幕尺寸设计它们是次要目标。

Answer 2

在实践中，不应该有显着的性能差异，根本不应该是一个。浏览器通常会序列化并删除重复的媒体查询。

唯一可能的问题是，如果额外的MQ会向您的css文件添加膨胀，因此下载时间会延长，从而延迟渲染。这种情况发生的可能性很小。

You can read a little more about it here

Answer 3

示例中的性能差异问题非常小。我唯一能告诉你的是性能：如果使用样式表，浏览器将加载所有样式表。只会应用与媒体查询匹配的那个。

基本上，只需使用更容易改变，组织等方法。。我的猜测是样式表。

关于查询次数，不会有性能变化。大多数浏览器会自动计算宽度，高度，屏幕，类型等，即使没有媒体查询。

希望有所帮助！

Answer 4

您的版本1与v2非常相似。我看到的差异是你写的＃34;所有CSS＆＃34;对于这种格式的＆＃34;样式＆＃34;。在编写所有CSS的情况下，您将拥有比V2更大的文件。加载较大的文件比较小的文件花费额外的时间，因此版本2将更有效。

无论如何，请将这两条规则用于表现： 1）尽可能缩短CSS。尽可能避免冗余。如果在顶级媒体查询中使用＆＃34; h2 {padding：0}，则不要在其他查询中使用它，因为这完全没有必要。 2）查看CSS的字符数或文件大小。较小的文件总是加载得更快。

CSS媒体查询 - 很多与少数

4 个答案: