在选择器中定义 CSS 媒体查询
Defining CSS media queries within selectors
如果不是在媒体查询(示例 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 在扩展 类 跨内部媒体查询以及范围变量方面存在一些限制。
从浏览器处理媒体查询的方式来看,应该没有性能差异。浏览器引擎会序列化并去除重复的媒体查询,因此它们只需要对每个媒体查询求值一次。他们还缓存查询,以便以后可以重新使用它。假设您的值基本相同,那么在您的代码中使用一个大的或多个媒体查询并不重要。
可能出现性能问题的一些可能性
- 您使用了多个具有不同值的媒体查询,并且浏览器 window 重新调整了大小。随着浏览器 window 大小的调整,多个媒体查询可能会成为 cpu.
的一大开销
- 当 CSS 选择器太复杂时。一个复杂的 CSS 选择器比多个媒体查询更能阻碍性能。因此,在复杂的选择器中使用多个媒体查询会导致性能问题
简答,没有。在 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
等等。
问题是它不起作用!这些年来情况可能已经发生了变化。我尝试将媒体查询放在选择器中,至少 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。
如果不是在媒体查询(示例 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 在扩展 类 跨内部媒体查询以及范围变量方面存在一些限制。
从浏览器处理媒体查询的方式来看,应该没有性能差异。浏览器引擎会序列化并去除重复的媒体查询,因此它们只需要对每个媒体查询求值一次。他们还缓存查询,以便以后可以重新使用它。假设您的值基本相同,那么在您的代码中使用一个大的或多个媒体查询并不重要。
可能出现性能问题的一些可能性
- 您使用了多个具有不同值的媒体查询,并且浏览器 window 重新调整了大小。随着浏览器 window 大小的调整,多个媒体查询可能会成为 cpu. 的一大开销
- 当 CSS 选择器太复杂时。一个复杂的 CSS 选择器比多个媒体查询更能阻碍性能。因此,在复杂的选择器中使用多个媒体查询会导致性能问题
简答,没有。在 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
等等。
问题是它不起作用!这些年来情况可能已经发生了变化。我尝试将媒体查询放在选择器中,至少 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。