@media 媒体查询失效的原因总结

1. 选择器的权限是否正确：

div p{
    font-size: 14px;
}

@media screen and (min-width:500px) and (max-width:1024px){
    p{
        font-size: 12px;
    }
}

例如：设置屏幕宽度在500px到1024px之间，p标签的文字大小为12px；

但是如果部分p标签的css权限 [ 上面div p 中的文字大小不变 ] 高于@media中的p权限，则不生效.

2. and前后的空格问题

@media screen and (min-width:500px) and (max-width:1024px){
    p{
        font-size: 12px;
    }
}

其中and 前后需要保证空格隔开.

3. meta声明

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

在手机端开发的情况中，需要将其设置，pc端则不做要求.