css - 在 Wordpress CSS Styling @media screen and (max-width : 1024px) will not work

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%;
  }
}

一直到 1024px 然后中断有人知道为什么会这样吗？

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 查询)的媒体查询应该从大屏幕的默认样式开始，然后添加较小尺寸的查询，像这样:

large/default > 1024 > 768 > 425 etc

而在移动优先模型中，您使用min-width 查询并且默认样式是最小的，然后添加更大的屏幕:

small > 425 > 768 > 1024 etc