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

是否存在任何问题(性能是我的主要考虑因素)如果不是在媒体查询中定义css选择器(示例1),则可以在css选择器中定义媒体查询(示例2).

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

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

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

.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在内部媒体查询中扩展类以及范围变量方面存在一些限制.

简短的回答,没有.在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