@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端則不做要求.