CSS 媒体查询 - 订单很重要？

Question

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

方法一

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

像这样显然代码更短，但是有很多 CSS 你最终会以你的风格 sheet 将一个容器的 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 声明。我想知道的是其他人如何将媒体查询 "statments" 包含到他们的 css.

中的规范

假设我只有一个转折点 CSS。所以我有一个媒体查询 min:800px 和第二个 max:799px.

我应该同时使用这两个查询 "statements"

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

在我的整个风格中只有一次sheet并将所有容器的所有CSS包含到两个媒体查询"statments"中？或者可以多次使用媒体查询 "statments" 吗？

我的意思是不是在样式sheet中做两个单独的区域（一个用于CSS以上，一个用于800px以下），如果对使用媒体查询的方法有任何顾虑"statments" 而不是多次（再次针对页面的每个部分，例如内容、小部件等以使其响应）？
我只想在我的样式 sheet.

的两个不同部分中使用 CSS 表示高于和低于 800px

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

Answer 1

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

第二个将始终以 799px 显示内容，如果设备为 800px，则任何内容都被设置为分配给 799 的样式而不是 800px，在这种情况下，因为它有 1px 的差异，所以没有太大区别, 但是如果你以大约 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 2

完全相同的 that I gave it 可以应用于您的问题：

Here is how you should use media queries:

Remember use the sizes you like/need. This below is just for demo purposes.

Non-Mobile First Method using 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*/ 
    }

Mobile First Method using 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*/ 
    }

Here is a good tutorial from W3.org

编辑：

根据您编辑的问题：

我想这取决于每个开发人员以及他们如何 need/think 开发 his/her 项目。

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

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

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

然后使用上面解释的非移动或移动方法（在我的case I usually use the non-mobile approach method) .

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

此外，有些开发人员更喜欢分成 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 文件。

所以每个组件不会有那么多媒体查询，你可以像上面显示的那样用一些评论来划分每个组件。

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

CSS 媒体查询 - 订单很重要？

CSS media queries - Order matters?

css

responsive-design

media-queries

编辑：

编辑 2：