我是新学习的响应式设计.我在旅程中注意到的是,当我将媒体查询放在样式表的底部时,一切都在断点方面完美无瑕.如果我将媒体查询放在样式表的顶部,则没有任何作用,直到最近我发现我需要将!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.... }
原文地址:https://www.jb51.cc/css/217798.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。