为什么我必须将媒体查询放在样式表的底部？答案

【问题标题】：Why do I have to put media queries at the bottom of the stylesheet?为什么我必须将媒体查询放在样式表的底部？
【发布时间】：2014-08-18 20:50:11
【问题描述】：

我是学习响应式设计的新手。我在旅途中注意到的是，当我将媒体查询放在样式表的底部时，关于断点的一切都完美无缺。如果我将媒体查询放在样式表的顶部，则没有任何效果，直到最近我才发现我需要将!important 和max-DEVICE-width（而不是max-width）添加到正在更改的css 中。

这是为什么？为什么将媒体查询放在样式表的底部时，在桌面和移动设备上都可以工作。

为什么当我将媒体查询放在样式表的顶部时，我需要添加 !important 和 max-DEVICE-width 才能使断点在桌面和移动设备上工作？

【问题讨论】：

这是覆盖样式的规则...下面所有的都会覆盖上面的...除非您使用重要！如果您以正确的顺序执行此操作，则不必使用它。
@John - 这是一个答案，而不是评论。 OP 无法接受评论。
是的，很好地回答简单的问题让我以前投票过...跨度>
注意：您应该能够避免在您的媒体查询样式中使用!important by increasing the specificity

标签： css responsive-design

【解决方案1】：

最好将查询写在优先级的底部。这将使您免于使用重要的压力！每次。

【讨论】：

【解决方案2】：

媒体查询与样式表的其余部分级联。您可以在样式表中散布媒体查询，因此您还可以根据需要级联样式。

例如：

.my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}

这正是由于 CSS 的级联性质而起作用的。您可以根据部分、单个选择器等根据需要组织媒体查询。

【讨论】：

【解决方案3】：

基本上，当您希望根据设备的一般类型（例如打印与屏幕）、特定特征（例如浏览器视口的宽度或环境（例如环境光）应用 CSS 样式时，您会使用媒体查询条件）。

当您开始设计时，您通常开始为已知规格的一种设备进行设计。所以你根据你当前的设备设计它，然后将它应用到其他屏幕尺寸。

因此顺序如下：进行完整设计 --> 在底部添加媒体查询以适应所需的屏幕尺寸。

【讨论】：

【解决方案4】：

因为 css 是从上到下读取的。最后设置的规则将被执行。

翻译一下，是这样的：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

当你添加!important就像是在说：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

【讨论】：

“Css 是从上到下读取”的说法并不完全正确，还有选择器的特殊性，更具体的选择器可以覆盖不太具体的选择器，即使它放在文件的较高位置. developer.mozilla.org/en-US/docs/Web/CSS/Specificity
@RedBit，是的，但在这种情况下，特异性将用作 !important 子句。文档仍然从上到下阅读，但选择器可以定义保留哪个子句。如果两个选择器具有相同的特异性值，则以后一个为准。

【解决方案5】：

CSS 从上到下读取。位于其他 CSS 之下的所有内容都会覆盖其之上的内容。但是，可以在 CSS 参数的末尾使用 !important 以使其覆盖其他所有内容

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

背景颜色将为黑色。如果您删除 !important，它将是粉红色的。

【讨论】：