我刚开始学习响应式设计。我在旅途中注意到的是,当我将媒体查询放在样式表的底部时,关于断点的一切都完美无缺。如果我将媒体查询放在样式表的顶部,则没有任何效果,直到最近我才发现我需要添加 !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!
}
当你添加 !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....
}
关于css - 为什么我必须将媒体查询放在样式表的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24456981/