媒体查询media不生效的原因及解决
作者：Dragonfly Fly
媒体查询@media常见的不生效原因包括格式书写错误,例如and后必须有空格；样式冲突,后面的CSS会覆盖前面的；CSS本身存在问题,比如块元素浮动导致父级元素无高度而背景颜色不显示；漏掉了meta属性中的viewport属性,正确书写和排列CSS代码
媒体查询@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" />
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。