最近在修改一个页面兼容手机版时，因为之前的页面没有考虑手机版，所以在样式文件最下面添加 @media screen and (max-width:481px) { ... } 这样的，以为大功告成了。结果一刷新页面却没有变效果。以为是自己手工拼写的字符有问题，结果跟之前写的正常效果样式一对比，是一样的，这就奇怪了。

后面查了半天才发现原因是html忘记写了 meta的viewport属性。晕，这是基本常识啊!太没注意了。记下来!然后总结同行们遇到的问题，总结一下。

@media screen and 不起作用原因一般来说是由下面几种原因：

1、格式书写错误，and前后需加空格，如：

@media screen and (max-width: 768px)

2、样式冲突：@media查询代码被后面的CSS代码覆盖

建议卸载CSS代码最后面，以免被前面的CSS代码覆盖

3、忘记加meta：meta属性viewport属性，可能会有人漏掉

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

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