每个班级都有单独的媒体查询？答案

【问题标题】：separate media queries for every class?每个班级都有单独的媒体查询？
【发布时间】：2021-12-23 02:17:13
【问题描述】：

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

我的意思是写

.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 */
  }
}

【问题讨论】：

为相同的分辨率划分和重复“媒体查询”有什么意义？
@SimoneRossaini，所以我可以立即看到完整的类定义，并且可以在所有地方进行更正。

标签： css media-queries

【解决方案1】：

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

【讨论】：

所以只是第一个解决方案会产生更多用户必须加载的代码（重复,@media only screen and (max-width: 800px)），对吧？