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

Question

我刚开始学习响应性设计。我在旅途中注意到的是，当我将媒体查询放在样式表的底部时，所有关于断点的操作都是完美无缺的。如果我将媒体查询放在样式表的顶部，那么什么都不起作用，直到最近我才发现需要将!important和max-DEVICE-width (而不是max-width)添加到正在更改的css中。

为什么会这样呢？为什么当将媒体查询放在样式表的底部时，媒体查询同时在桌面和移动平台上工作。

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

Answer 1

因为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....
}

Answer 2

CSS是自上而下读取的。任何低于其他css的内容都会覆盖上面的内容。但是，可以在CSS参数的末尾使用!important使其覆盖所有其他内容。

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

背景颜色将是黑色。如果你删除！重要的，它将是粉红色的。

Answer 3

媒体查询与样式表的其余部分级联在一起。您可以在样式表中穿插媒体查询，因此也可以根据需要级联样式。

例如：

.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的级联性质。您可以根据需要根据节、个别选择器等组织媒体查询。