@media screen and css样式无效不起作用原因汇总

css 02-28 11:34

最近在修改一个页面兼容手机版时,因为之前的页面没有考虑手机版,所以在样式文件最下面添加 @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、括号中的内容内容不能写结束符“;”,以及其它错误

相关推荐