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

我是新学习的响应式设计.我在旅程中注意到的是,当我将媒体查询放在样式表的底部时,一切都在断点方面完美无瑕.如果我将媒体查询放在样式表的顶部,则没有任何作用,直到最近我发现我需要将！important和max-DEVICE-width(而不是max-width)添加到正在更改的css中.

为什么是这样？当放在样式表的底部时,为什么媒体查询在桌面和移动设备上都有效.

为什么当我将媒体查询放在样式表的顶部时,我需要添加！important和max-DEVICE-width,以便断点能够在桌面和移动设备上运行？

解决方法

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

当你添加！重要就像说：

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