媒体查询media不生效的原因及解决

毓鸣

媒体查询@media不生效的原因


1.格式书写错误

and后面必须有空格

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

复制代码

2.样式冲突

@media查询带的css写在后面
@media查询的css写在前面会被后面的css所覆盖。

1. p {
   
2.     background-color:lightgreen;
   
3. }
   
4. 
   
5. @media screen and (max-width: 1280px) and (max-height: 800px){
   
6.     p {
   
7.         background-color:skyblue;
   
8.     }
   
9. }

复制代码

3.css本身出了问题导致css不生效

注意：

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

4.漏掉了meta属性viewport属性

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

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/328920rgi.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！