示例1 - 媒体查询中的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选择器比多个媒体查询阻碍了很多性能。因此，在复杂选择器内部进行多个媒体查询可能会导致性能问题

Answer 3

问题是它不起作用！多年来，情况可能已经改变。我尝试将媒体查询放入选择器中，至少Firefox抱怨它的属性名称无效。

MDN的意思是：

@media规则可能位于代码的顶层或嵌套在任何其他条件组规则中。

它只能嵌套在另一个条件组规则中。

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

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

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

3 个答案: