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声明。我想知道的是其他人如何包含媒体查询和＃34;陈述＆＃34;进入他们的CSS。

让我们说我只有一个突破点，我切换一些CSS。所以我有一个媒体查询min：800px和第二个最大：799px。

我应该同时使用查询＆＃34;语句＆＃34;

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

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

我的意思是代替在样式表中创建两个单独的区域（一个用于上面的CSS，一个用于低于800px），如果对使用媒体查询的方法有任何疑虑＆＃34; statments＆＃34;而是多次（对于页面的每个部分，例如内容，窗口小部件等，以使它们响应）？我想在样式表的两个不同部分中使用高于和低于800px的CSS。

我知道这两种方法都有效，我对这些规范感到好奇，如果使用媒体查询＆＃34;语句＆＃34; CSS表格中的数十次或数百次（而不是我提到的情况下只有两次）会增加加载时间吗？

Answer 1

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

以下是使用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的规则

EDIT2：

根据你上次发表的评论，我能给你的答案是意见明智的，所以我能为你做的最好的就是给你一些文章，这样你就这个话题可以有自己的看法：

How many media queries is too many?

Web Performance: One or thousands of Media Queries?

Debunking Responsive CSS Performance Myths

Answer 2

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

第二个将始终以799px显示内容，并且如果设备为800px，则任何内容都被设置为分配给799的样式而不是800px，在这种情况下，因为它的1px差异不是＆＃39;有很大的不同，但是如果你在大约200px不同的情况下这样做会导致你的设计出现问题。

示例：

如果你这样：

@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;
      }
    }

如果设备宽度小于799px，背景将为绿色，因为没有定义任何！important关键字。

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

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

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

除非两个元素发生碰撞，否则它不会延长处理器的使用时间。你可以改变最小宽度和最大宽度。

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 { ... }
    }

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

因此，每个组件都没有那么多媒体查询，您可以使用上面显示的一些注释来划分每个组件。

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

CSS媒体查询 - 订单事宜？

3 个答案:

编辑：

EDIT2：