媒体查询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" />