多个媒体查询和单个媒体查询哪个更好

Question

我正在使用bootstrap，我想(在适用的情况下)为每个屏幕尺寸提供特定的CSS。我在想，在我的CSS工作表中，每种屏幕尺寸都有一个媒体查询是更好，还是应该在每个需要的地方都做一个媒体查询。

假设我的标准屏幕尺寸是这样的：

.example-class{
    padding: 10px;
}

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

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

我是否应该在我的CSS的自己的部分中有一个移动屏幕的媒体查询，所有移动屏幕样式都将放在那里，或者我应该在每次需要移动屏幕的自定义样式时都进行媒体查询。

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

另外，我想确保我的CSS很容易被其他人理解。我认为在每个需要的实例中都有一个媒体查询可能会更容易，这样特定元素的CSS就会集中在一个地方。

Answer 1

据我所知，Webkit和Gecko引擎都会序列化媒体查询(我相信这实际上是W3C的建议)，因此它们只需对媒体查询进行一次评估。

我要说的是，如果性能对您来说是一个问题，那么为每个案例加载特定的文件，清除其中的杂乱。这样，你最终得到了几个较小的文件，并且只在你需要的时候加载你需要的文件。

如果性能不是问题，就我个人而言，我不认为CSS文件大小会增加那么多来影响您的网站性能。记住，经常调整网页的大小是不正常的，除非你正在测试一些东西。

作为前端开发人员，如果您的元素CSS都在一起，那么维护CSS要容易得多，而不是通过文件的几个部分或几个文件来更新它。

因此，我建议您：

.example-class{
    padding: 10px;
}

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

希望这能有所帮助。

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