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

Posted 2023-03-06

【中文标题】有多个媒体查询还是单个媒体查询更好

【英文标题】：Is it better to have multiple media queries or a single media query

【发布时间】：2017-08-06 10:33:29

【问题描述】：

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

假设我的标准屏幕尺寸有这个：

.example-class
    padding: 10px;

然后对于移动屏幕，我想要这个：

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

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

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

此外，我想确保我的 CSS 易于其他人理解。我认为在需要的每个实例中都有一个媒体查询可能更容易，这样特定元素的 CSS 就在一个位置。

【问题讨论】：

使用像 SASS 或 Less 这样的 CSS 预编译器，所有这些都会消失，您不必担心。

【参考方案1】：

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

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

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

作为前端开发人员，如果您的元素 CSS 全部放在一起，则维护 CSS 会容易得多，而不必遍历文件的多个部分或多个文件来更新它。

所以我建议：

.example-class
    padding: 10px;


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

希望这会有所帮助。

【参考方案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*/
   .
   .
   .