CSS 媒体查询 - 顺序很重要？

Question

现在我经常使用 CSS 媒体查询，我想知道最好按什么顺序使用它们。

方法一

@media only screen and (min-width: 800px) {
    #content { ... }
    #sidebar { ... }
}
@media only screen and (max-width: 799px) {
    #content { ... }
    #sidebar { ... }
}

这样的代码显然更短，但如果有大量 CSS，您最终会将一个容器的 CSS 分散到样式表中的多个位置。

方法二

@media only screen and (min-width: 800px) {
    #content { ... }
}
@media only screen and (max-width: 799px) {
    #content { ... }        
}
@media only screen and (min-width: 800px) {
    #sidebar { ... }
}
@media only screen and (max-width: 799px) {
    #sidebar { ... }
}

像这样，如果您为每个新容器指定屏幕大小（CSS 处于活动状态），那么在我看来，概览会好得多。 但是对于大量 CSS，您将使用 @media 查询数十次。

第二种方法是否会导致加载时间显着延长或有任何其他缺点？

编辑：

我可能还不够清楚。我的问题与订单或查询本身或覆盖 CSS 声明无关。 我想知道的是其他人如何将媒体查询“语句”包含到他们的 css 中的规范。

假设我只有一个断点可以切换一些 CSS。 所以我有一个针对 min:800px 的媒体查询和一个针对 max:799px 的媒体查询。

我应该同时使用两个查询“语句”

@media only screen and (min-width: 800px) { ... }
@media only sreen and (max-width: 799px) { ... }

在我的整个样式表中只包含一次，并将所有容器的所有 CSS 包含到两个媒体查询“语句”中？ 还是可以多次使用媒体查询“语句”？

我的意思是不要在样式表中创建两个单独的区域（一个用于 CSS 以上，一个用于 800px 以下），如果对多次使用媒体查询“语句”的方法有任何顾虑（对于再次访问页面，例如内容、小部件等以使其具有响应性）？
我只想在样式表的两个不同部分中使用 800 像素以上和以下的 CSS。

我知道这两种方法都有效，我只是对规范感到好奇，如果在 CSS 表中使用媒体查询“声明”数十次或数百次（而不是在我提到的情况下只使用两次）将增加加载时间？

Answer 1

这意味着，如果你应用两个规则碰撞相同的元素，它将选择最后一个声明的规则，除非第一个有 !important 标记

第二个总是以 799px 显示内容，如果设备是 800px，则任何内容被设置为分配给 799 而不是 800px 的样式，在这种情况下，因为它是 1px 的差异，它并没有太大的不同，但是如果您以大约 200 像素的差异进行操作，则会给您的设计带来问题。

例子：

如果你有这种方式：

@media (max-width: 800px) {
  body {
    background: red;
  }
}

@media (max-width: 799px) {
  body {
    background: green;
  }
}

如果设备的宽度为 799 像素或更小，则背景将为绿色。

如果反过来

@media (max-width: 799px) {
      body {
        background: red;
      }
    }

    @media (max-width: 800px) {
      body {
        background: green;
      }
    }

如果设备宽度小于 799 像素，则背景将为绿色，因为没有定义 !important 关键字。

当 !important 关键字被定义时，结果例如一个将是相同的

@media (max-width: 799px) {
      body {
        background: red; !important
      }
    }

    @media (max-width: 800px) {
      body {
        background: green;
      }
    }

除非两个元素发生冲突，否则处理器不会花费更长的时间。你可以改变最小宽度和最大宽度。

Answer 2

与我给它的here 完全相同的answer 可以应用于您的问题：

这里是你应该如何使用media queries：

请记住使用您喜欢/需要的尺寸。以下仅用于演示 目的。

非移动优先方法使用max-width：

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width: 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width: 320px) {
      /*your CSS Rules*/ 
    }

移动优先方法使用min-width：

/*==========  Mobile First Method  ==========*/
 
    @media only screen and (min-width: 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width: 960px) {
      /*your CSS Rules*/ 
    }

这是来自 W3.org 的一个很好的 tutorial

编辑：

根据您编辑的问题：

我想这取决于每个开发人员以及他们需要/如何思考来开发他/她的项目。

这是我用来做的（不使用预编译器时）：

我创建了一个文件 styles.css，其中包含将应用于项目的一般样式，如下所示：

/*==========  All Screens  ==========*/
    {
      /*General CSS Rules*/     
    }

然后在下面使用media queries，使用上述非移动或移动方法（在我的情况下，我通常使用非移动方法) .

但是，根据项目的不同，除了“标准”之外，您可能还需要一些其他的休息时间，这可以引导您以您提到的方式使用规则。

此外，有些开发人员更喜欢将文件分成 2 个文件，一个具有通用样式 CSS，另一个具有 media queries 样式。

重要提示：与创建具有一般样式的文件有一个区别 + 1 media queries（min-width:800px 或 max-width:799px)，然后只有一个具有 2 个媒体查询的文件（min-width:800px /max-width:799px)，这是当你有通用规则时，它将适用于所有widths，因此你只需要为 1 media queries 设置规则。

编辑2：

根据您上次的评论，我能给您的答案将是明智的，所以我能为您做的最好的就是给您一些文章，以便您对这个话题有自己的看法：

How many media queries is too many?

Web Performance: One or thousands of Media Queries?

Debunking Responsive CSS Performance Myths

Answer 3

我建议你使用第一种方法。 如果您首先开发网站移动设备，那么您将不需要移动设备的媒体查询，而只需要平板电脑和桌面设备。

    //Mobile first

    .your-mobile-styles-also-shared-with-tablet-and-desktop{

    }

    //Tablet

    @media only screen and (min-width: 641px) {
        #content { ... }
        #sidebar { ... }
    }

    //Desktop

    @media only screen and (min-width: 1025px) {
        #content { ... }
        #sidebar { ... }
    }

如果您使用的是 CSS 预处理器，如 SASS 或 LESS，您始终可以创建许多 LESS 或 SASS 组件，这些组件将包含在您的 main.less 或 main.scss / .sass 文件中。

所以每个组件不会有那么多媒体查询，你可以用一些 cmets 来划分每个组件，如上所示。

这样你的代码会更容易阅读，也更短，因为平板电脑和桌面共享的所有属性都可以在你的 CSS 组件文件的开头定义。