CSS媒体查询 - 订单事宜？

Question

现在使用CSS媒体查询工作很多,我想知道最好使用它们的顺序.

方法1

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

像这样显然代码更短,但是有了很多CSS,你最终会将一个容器的CSS扩展到样式表中的多个位置.

方法2

@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和第二个最大:799px.

我应该使用两个查询"语句"吗？

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

在我的整个样式表中只有一次,并将所有容器的所有CSS包含在两个媒体查询"statments"中？或者也可以多次使用媒体查询"声明"？

我的意思是代替在样式表中创建两个单独的区域(一个用于上面的CSS,一个用于低于800px),如果对使用媒体查询"statments"的方法有任何担忧,而不是多次(对于页面的每个部分) ,如内容,窗口小部件等,使他们响应)？
我想在样式表的两个不同部分中使用上下800px的CSS.

我知道这两种方法都有效,我对这些规范很好奇,如果在CSS表格中使用媒体查询"语句"几十次或几百次(而不是在我提到的情况下只有两次)会增加负载次？

Answer 1

我在这里给出的答案完全相同可以应用于您的问题:

以下是您应该如何使用媒体查询:

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

非移动第一种方法使用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的一个很好的教程

编辑:

根据您编辑的问题:

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

这是我用来做的事情(当不使用预编译器时):

我创建了一个文件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))有一个区别,即当您具有适用于ALL的一般规则时widths,因此您只需要设置规则为1 media queries.

EDIT2:

根据你的最后评论,我可以给你的答案是意见,所以我能为你做的最好的是给你一些文章,这样你就这个话题可以有自己的看法:

有多少媒体查询太多了？

网络性能:一个或几千个媒体查询？

揭穿响应式CSS性能神话