单个媒体查询还是多个媒体查询更好？

Question

我正在使用Bootstrap，希望在每个屏幕大小上都有特定的CSS（适用时）。我想知道是更好地将每个屏幕大小的媒体查询放在我CSS文件中自己的部分中（每个屏幕大小一个），还是在需要的每个位置进行媒体查询。

比如说，对于我的标准屏幕大小：

.example-class{
    padding: 10px;
}

然后对于移动屏幕，我希望是这样的：

@media(max-width: 480px){
    .example-class{
        padding: 5px;
    }
}

我应该在CSS的专门部分为移动屏幕设置一个媒体查询，所有移动屏幕的样式都将放在那里，还是每次需要为移动屏幕定制样式时都要使用媒体查询？

据我所知，拥有多个媒体查询不一定会影响性能。但添加许多媒体查询会增加CSS文件的大小，这可能会影响性能。

此外，我希望确保我的CSS易于他人理解。我认为每次需要时都在其中设置媒体查询可能更容易，这样特定元素的CSS就全部在一个地方了。

- Dylan Caudill

---

使用像SASS或Less这样的CSS预编译器，所有这些问题都将消失，您就不必再担心它了。 - DavidG

Answer 1

据我所了解， Webkit 和 Gecko 引擎都序列化媒体查询（我认为这实际上是 W3C 的建议），因此它们只需评估媒体查询一次。

如果性能是您关注的问题，我建议为每种情况加载特定的文件，将其中的混乱清除。这样，您就会得到几个较小的文件，并且只有在需要时才加载所需的文件。

如果性能不是问题，个人认为 CSS 文件大小不会增加太多，从而影响您的网站性能。请记住，经常调整网页大小并不正常，除非您正在测试。

作为前端开发人员，如果您的元素 CSS 都在一起而不是必须浏览文件的几个部分或几个文件才能更新它，则更容易维护 CSS。

因此，我建议：

.example-class{
    padding: 10px;
}

@media(max-width: 480px){
    .example-class{
        padding: 5px;
    }
}

希望这能有所帮助。

- Mario Andrade

Answer 2

为一系列屏幕尺寸编写通用的媒体查询间隔，而不是在必要时编写媒体查询，可以使代码更易于管理和扩展。

@media screen and (min-width: 320px) and (max-width: 767px) {
  /*Mobile Device Screens*/
}

@media screen and (min-width: 991px) {
  /*Large Screens*/
}

为了使代码更易读，我们可以根据不同页面及其相应内容将每个区间的代码分成部分和子部分。

@media screen and (min-width: 320px) and (max-width: 767px) {
  /*Mobile Device Screens*/
   /*Homepage*/
   .
   .
   .
   /*About*/
   .
   .
   .
}

@media screen and (min-width: 991px) {
  /*Large Screens*/
   /*Homepage*/
   .
   .
   .
   /*About*/
   .
   .
   .
}

- Dan Philip Bejoy