在选择器中定义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性能:一个或数千个媒体查询所述,以您的方式添加媒体查询不会造成性能损失.

只要在每个选择器中使用相同的媒体查询,除了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-widthsmax-widths

Answer 2

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

MDN是这样说的：

@media at-rule 可以放置在代码的顶层，或者嵌套在任何其他条件组 at-rule 内。

它只能嵌套在另一个条件组 at-rule内。

Answer 3

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

可能出现性能问题的一些可能性

• 您使用具有不同值的多个媒体查询，并重新调整浏览器窗口的大小。随着浏览器窗口重新调整大小，多个媒体查询可能会在 CPU 上产生很大的开销。
• 当 CSS 选择器太复杂时。与多个媒体查询相比，复杂的 CSS 选择器对性能的影响更大。因此，在复杂的选择器中使用多个媒体查询可能会导致性能问题