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

Question

我正在使用引导程序，并且希望（在适用情况下）针对每个屏幕尺寸都具有特定的CSS。我想知道是否最好在CSS表格的自己的部分中针对每个屏幕尺寸进行一次媒体查询，或者是否应该在需要的每个位置进行媒体查询。

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

.example-class{
    padding: 10px;
}

然后对于手机屏幕，我想要这样：

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

我应该在CSS的自己的部分中对移动屏幕进行1个媒体查询，所有移动屏幕样式都会移至该部分，还是应该在每次需要对移动屏幕进行自定义样式时进行媒体查询。

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

另外，我想确保我的CSS对其他人来说很容易理解。我认为在需要的每个实例中进行媒体查询可能会更容易，这样一来，特定元素的CSS就可以集中在一起。

Answer 1

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

我会说，如果性能对您来说是一个问题，请为每种情况加载特定文件，清除它们中的混乱。通过这种方式，您最终会得到几个较小的文件，并且只在需要时加载您需要的文件。

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

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

所以我建议有：

.example-class{
    padding: 10px;
}

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

希望这可以帮助。