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

Posted 2023-03-06

【中文标题】在选择器中定义 CSS 媒体查询

【英文标题】：Defining CSS media queries within selectors

【发布时间】：2015-05-06 10:53:49

【问题描述】：

如果不是在媒体查询中定义 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 在跨内部媒体查询扩展类以及范围变量方面存在一些限制。

【问题讨论】：

在 LESS 编译或浏览器渲染方面的性能差异？后者取决于 CSS 的生成方式，因为样式规则可能出现在 @media 规则中，但不会反过来。

第二个示例如何工作？ “选择器”是指mixins 吗？在任何规则之外调用，这些混入应该可以工作，但你的问题中写的出现并没有 afaik。您应该添加像.foo() @media @media @media 这样的括号，这样这种情况就不会输出为（无效的）CSS，而只是定义为一个mixin，然后您可以调用这个mixin，它会输出3个媒体规则，每个规则都有规则跨度>

在我的测试中，似乎不支持这种定义媒体查询的方式。

在 Firefox 中使用 ID 选择器时，使用这种传统支持似乎不起作用：@media (min-width: 1500px) #foo ...

【参考方案1】：

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

MDN 是这样说的：

@media at 规则可以放在代码的顶层，或者 嵌套在任何其他条件组中。

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

【讨论】：

我也无法让它工作。你能举个例子，“它只能嵌套在另一个条件组中。”是什么意思？

@1.21gigawatts 例如@media screen 所以它不能打印，它也可以是@supports 但不在选择器内：selector 。这就是它的意思；）（如果有帮助的话）

【参考方案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等等。

【参考方案3】：

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

---

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

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