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

一直到 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/

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

large/default > 1024 > 768 > 425 etc

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

small > 425 > 768 > 1024 etc

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

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

css

wordpress

styling

twitter-bootstrap