关于css媒体查询不起作用的解决方法

1、关于媒体查询：

在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。

2、可能的原因：

（1）首先确认是不是css本身的问题，而不是媒体查询没有生效。
比如
div{display:flex;}
如果写入了此代码，那么div所有的display效果都将无法生效；

（2）格式书写错误and后面必须有空格，例如下面代码：
/*屏幕小于640px时的样式*/
@media screen and (max-width:640px){
.wrap{width:80%}
}

我有次就是没加空格，在and后面没有空格，而且非常不容易发现，所有大家一定要注意！注意！注意！

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

（4）括号中的内容内容不能写结束符“;”，以及其它错误。

（5）meta属性viewport属性，这个虽然基本常识，但有时候是接手别人的项目，突然一下媒体查询不起作用还真的需要好好排查。
<meta name="viewport" content="width=device-width,initial-scale=1" />