这篇文章主要介绍css3 @media不起作用的原因，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
css3 media不起作用的原因：1、HTML meta标签中没有设置加viewport属性；2、样式冲突，@media查询代码的样式被后面的css所覆盖；3、格式书写出现错误，mediah语句的and后面必须有空格。
在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。只需在CSS中添加@media screen属性，针对不同设备的宽度进行编写CCS样式，根据浏览器宽度判断判断样式文件并输出不同的宽度值。
但有时设置@media媒体查询后，发现不起作用，这是什么原因？怎么解决？下面本篇文章给大家介绍一下。
css3 @media不起作用的可能原因
不要慌呢，慢慢分析。
首先确认是不是css本身的问题，而不是媒体查询没有生效。例如：
div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误：格式书写错误,and后面必须有空格
例如下面代码：
@media screen and (max-width:500px){ }第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖
注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖。
第三种错误：css本身出了问题导致css不生效
注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。
例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一 一列举了。
第四种错误：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉。
<meta name="viewport" content="width=device-width, initial-scale=1" />
第五种错误：括号中的内容内容不能写结束符“;”，以及其它错误。
解决办法：
有很多解决方法，但是建议可以是用css排除法，使用css注释掉一部分；
当然浏览器也是一个很好的查看代码解决问题的方法。
@media screen and (max-width:200px){
/*这只是一个示例*/
}以上是css3 @media不起作用的原因的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
