css - 在选择器中定义 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 等等。