如何解决css3 media不起作用的问题(2)-木庄网络博客

2022-03-23 08:57:51 PHP中文网 JavaScript 百度已收录

请按照下面的几种错误进行排查。

第一种错误：格式书写错误and后面必须有空格例如下面代码；

1	`@media screen` `and` `(max-width:500px){ }`

第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖

注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖

第三种错误：css本身出了问题导致css不生效

注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。

例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一一列举了。

第四种错误：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉

1	`<meta name="viewport"` `content="width=device-width, initial-scale=1"` `/>`

第五种错误：括号中的内容不能写结束符“;”，以及其它错误。

相关推荐：css视频教程

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者