css - CSS媒体查询-多与少

Question

假设1个CSS文件和3个@media格式，例如:

@media (min-width:1280px)
@media (min-width:640px) and (max-width:1279px)
@media (max-width:639px)

在一次使用每种@media格式与填充所有合适的CSS规则之间，是否存在明显的 性能差异，例如:

@media (min-width:1280px) {
  /* all css for this format */
}

@media (min-width:640px) and (max-width:1279px) {
  /* all css for this format */
}

@media (max-width:639px) {
  /* all css for this format */
}

VS

根据需要使用尽可能多的@media声明(与CSS规则/节一样多)...例如:

div.some-class-name {
  /* styles */
}

@media (min-width:1280px) {
  div.some-class-name {
    /* styles for this format */
  }
}

@media (min-width:640px) and (max-width:1279px) {
  div.some-class-name {
    /* styles for this format */
  }
}
@media (max-width:639px) {
  div.some-class-name {
    /* styles for this format */
  }
}

我个人更喜欢第2版(尽管可能不会过多)，因为为每个@media查询跟踪一对特定的样式要容易得多。

谢谢反馈!

Answer 1

我不是这方面的专家，但是我找到了一篇不错的文章来解决这个问题:

https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/

It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn’t matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down). The only thing I could add here is that using many inline media queries often is that they’re increasing the size of your CSS (unless your gzipping it) and that affects performance as it’s loaded blocking.

我感觉合理。我个人喜欢对元素样式进行分组，而不是对媒体查询进行分组(问题中的版本2)。在我看来，CSS的目标是对元素进行样式设置，并根据屏幕大小对元素进行样式设置是次要目标。