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

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