在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等