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

Question

如果不是在媒体查询（示例 1）中定义 css 选择器，而是在 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) { ... }
}

您可能想知道 "why do this?"。 LESS 在扩展类跨内部媒体查询以及范围变量方面存在一些限制。

Answer 1

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

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

您使用了多个具有不同值的媒体查询，并且浏览器 window 重新调整了大小。随着浏览器 window 大小的调整，多个媒体查询可能会成为 cpu.
当 CSS 选择器太复杂时。一个复杂的 CSS 选择器比多个媒体查询更能阻碍性能。因此，在复杂的选择器中使用多个媒体查询会导致性能问题

Answer 2

简答，没有。在 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 3

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

MDN 是这样说的：

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

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

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

Defining CSS media queries within selectors

css

less

media-queries

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

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