在选择器中定义CSS媒体查询

Question

如果您没有在媒体查询中定义css选择器（示例1），而是在css选择器中定义了媒体查询（示例2），是否有任何问题（性能是我的首要考虑）。

示例1-媒体查询中的CSS选择器

@media (min-width: 600px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1000px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1500px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

示例2-CSS选择器中的媒体查询

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.hello {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.world{
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

您可能想知道“为什么这样做？”。在LESS中，围绕在媒体查询内部扩展类以及确定变量范围存在一些限制。

Answer 1

简短回答，不。在CSS选择器中定义媒体查询没有性能问题。

但是让我们潜入...

如Anselm Hannemann出色的文章Web Performance: One or Thousands of Media Queries中所述，按您的方式添加媒体查询不会造成性能损失。

只要在每个选择器中使用相同的媒体查询集，就不会对性能造成重大影响，只是CSS文件可能会更大。

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

但是，确实重要的是您使用了多少不同个媒体查询。 min-widths，max-widths等不同。

Answer 2

[在浏览器处理媒体查询的方式上不应有性能差异。浏览器引擎会序列化并剥离重复的媒体查询，因此它们只需要评估每个媒体查询一次。他们还缓存查询，以便以后可以重用。假设您的值基本相同，则在代码中使用一个或多个大媒体查询都没关系。

---

可能存在性能问题的一些可能性

• 您使用具有不同值的多个媒体查询，并调整了浏览器窗口的大小。由于调整了浏览器窗口的大小，因此在cpu上进行多个媒体查询可能会带来很大的开销。
• 当CSS选择器过于复杂时。与多个媒体查询相比，复杂的CSS选择器在性能上有很多障碍。因此，在复杂的选择器中进行多个媒体查询会导致性能问题