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

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