在 Wordpress CSS 样式中 @media screen 和 (max-width: 1024px) 将不起作用

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

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

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/

总而言之，基于 desktop-first 模型（max-width 查询）的媒体查询应该从大屏幕的默认样式开始，然后添加较小尺寸的查询，如下所示：

大/默认 > 1024 > 768 > 425 等

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

小 > 425 > 768 > 1024 等