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

作者：空灵一_一_379 | 来源：互联网 | 2023-05-16 20:06

Arethereanyissues(performanceismyprimaryconcern)ifinsteadofdefiningcssselectorswithin

Are there any issues (performance is my primary concern) if instead of defining css selectors within media queries (example 1), you define media queries within css selectors (example 2).

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

Example 1 - css selectors within media queries

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

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

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

Example 2 - media queries within css selectors

.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) { ... }
}

You may be wondering "why do this?". There are some limitations in LESS around extending classes across inside media queries, and also scoping variables.

你可能想知道“为什么这样做?”。 LESS在内部媒体查询中扩展类以及范围变量方面存在一些限制。

2 个解决方案

#1

Short answer, no. There are no performance issues in defining media queries within CSS selectors.

简短的回答,没有。在CSS选择器中定义媒体查询没有性能问题。

But let's dive in...

但是让我们潜入......

As described in Anselm Hannemann great article Web Performance: One or Thousands of Media Queries there is no performance loss from adding the media queries in the manner you are.

正如Anselm Hannemann所描述的伟大文章Web性能:一个或数千个媒体查询所述,以您的方式添加媒体查询不会造成性能损失。

As long as the same couple of media queries are being used in each selector there is no major performance hit other than your CSS file might be a bit larger.

只要在每个选择器中使用相同的媒体查询,除了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) { ... }
}

However, it does matter how many different media queries you use. Different being different min-widths, max-widths and so on.

但是,使用多少不同的媒体查询并不重要。不同的是最小宽度,最大宽度等。

#2

There shouldn't be a performance difference looking at the way browsers handle media queries. Browser engines do serialize and strip out duplicated media-queries so they only need to evaluate each media query once. Also they cache the queries so that they can re-use it later on. It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same.

在浏览器处理媒体查询的方式上应该没有性能差异。浏览器引擎会序列化并删除重复的媒体查询,因此他们只需要评估每个媒体查询一次。他们还会缓存查询,以便以后可以重复使用它们。如果您在代码中使用一个大型或多个媒体查询,假设您的值大致相同,则无关紧要。

Some of the possibilities when there can be performance issues

可能存在性能问题的一些可能性

You use multiple media queries with different values and the browser window is re-sized. As the browser window is re-sized, multiple media queries can be a big overhead on the cpu.

您使用具有不同值的多个媒体查询,并重新调整浏览器窗口的大小。随着浏览器窗口的重新调整大小,多个媒体查询可能是cpu的一大开销。

When the CSS selectors are too complex. A complex CSS selector is much performance hindering than multiple media queries. So having multiple media queries inside complex selectors can cause performance issues

当CSS选择器太复杂时。复杂的CSS选择器比多个媒体查询阻碍了很多性能。因此,在复杂选择器中进行多个媒体查询可能会导致性能问题