每个 class 的单独媒体查询？

Question

如果我对每个 class 进行单独的媒体查询，是否会使网站变慢？

我要写

.class1 {
   /* rules */
}  

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
}

.class2 {
 /* rules */
}

@media only screen and (max-width: 800px) {
  .class2 {
     /* rules */
  }
}

而不是（我随处可见）

.class1 {
   /* rules */
}

.class2 {
   /* rules */
}

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
  .class2 {
     /* rules */
  }
}

Answer 1

拥有多个媒体查询应该不会影响性能。但是，如果您的项目随后会扩展并且添加许多查询会增加 CSS 文件的大小，这可能会影响网站的性能。

每个 class 的单独媒体查询？

separate media queries for every class?

css

media-queries