我是新学习的响应式设计.我在旅程中注意到的是,当我将媒体查询放在样式表的底部时,一切都在断点方面完美无瑕.如果我将媒体查询放在样式表的顶部,则没有任何作用,直到最近我发现我需要将！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....
}
