在WordPress的CSS樣式@media屏幕（最大寬度：1,024）將行不通

Question

當我使用

@media only screen and (max-width: 1024px) { 
    #imgWrapper { 
    position: relative; 
    width: 80%; 
    Height: 80%; 
    } 
} 

的代碼不起作用，默認爲原來的造型但是代碼適用於

@media only screen and (max-width: 425px) { 
    #imgWrapper { 
    position: relative; 
    width: 50%; 
    Height: 50%; 
    } 
} 

一路攀升至1,024像素，然後休息 人有爲什麼發生這種情況的任何想法？

Answer 1

您的max-width: 1024px查詢必須放在之前max-width: 425px查詢代碼中，否則，作爲CSS特殊性的預期結果，將會發生覆蓋。

演示順序錯誤的：

#imgWrapper { 
 
    border: 1px dashed red; 
 
    padding: 10px; 
 
    position: relative; } 
 

 
#imgWrapper::after { content:"Default - Desktop/Large Screen"; } 
 

 
@media only screen and (max-width: 425px) { 
 
    #imgWrapper { 
 
    position: relative; 
 
    width: 50%; } 
 
    #imgWrapper::after { content:"Max-425"; } 
 
} 
 

 
@media only screen and (max-width: 1024px) { 
 
    #imgWrapper { 
 
    position: relative; 
 
    width: 75%; } 
 
    #imgWrapper::after { content:"Max-1024"; } 
 
}

<div id="imgWrapper">Media Query: </div>

正確的順序：

#imgWrapper { 
 
    border: 1px dashed red; 
 
    padding: 10px; 
 
    position: relative; } 
 

 
#imgWrapper::after { content:"Default - Desktop/Large Screen"; } 
 

 
@media only screen and (max-width: 1024px) { 
 
    #imgWrapper { 
 
    position: relative; 
 
    width: 75%; } 
 
    #imgWrapper::after { content:"Max-1024"; } 
 
} 
 

 
@media only screen and (max-width: 425px) { 
 
    #imgWrapper { 
 
    position: relative; 
 
    width: 50%; } 
 
    #imgWrapper::after { content:"Max-425"; } 
 
}

<div id="imgWrapper">Media Query: </div>

的jsfiddle：https://jsfiddle.net/azizn/d5bto8vL/

總之，這是基於桌面的第一模型（max-width查詢）媒體查詢應該與大屏幕，然後添加查詢，以較小的尺寸，像這樣的默認樣式開始：

大/默認> 1024> 768> 425等

而在移動第一模型，Y OU使用min-width查詢和默認的樣式是最小的，然後添加了更大的屏幕：

小> 425> 768> 1024等