媒体查询media不生效的原因及解决-牛翰网

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

1.格式书写错误

and后面必须有空格

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

2.样式冲突

@media查询带的css写在后面

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

p {
    background-color:lightgreen;
}

@media screen and (max-width: 1280px) and (max-height: 800px){
    p {
        background-color:skyblue;
    }
}

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

注意：

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

4.漏掉了meta属性viewport属性

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

总结

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

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

Vue.js 前端开发编程开发
# 不生效 # media # 媒体查询

目录

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

1.格式书写错误

2.样式冲突

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

4.漏掉了meta属性viewport属性

总结