在选择器中定义CSS媒体查询 [英] Defining CSS media queries within selectors

问题描述

如果不是在媒体查询中定义css选择器(示例1)，而是在css选择器中定义媒体查询(示例2)，是否有任何问题(性能是我的主要关注点).

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

@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中，围绕在媒体查询内部扩展类以及确定变量范围存在一些局限性.

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

推荐答案

简短答案，不.在CSS选择器中定义媒体查询没有性能问题.

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

但是让我们潜入...

But let's dive in...

如Anselm Hannemann的精彩文章网络性能:一个或成千上万的媒体查询，而不会因按您的方式添加媒体查询而导致性能下降.

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.

只要在每个选择器中使用相同的媒体查询集，就不会对性能造成重大影响，除了CSS文件可能会更大.

As long as the same set 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.

.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等不同.

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

这篇关于在选择器中定义CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！