媒体查询宽度 100% 不起作用答案

【问题标题】：Media query width 100% not working媒体查询宽度 100% 不起作用
【发布时间】：2018-06-28 02:11:41
【问题描述】：

Here 是我正在编写的代码的 codepen 链接。我试图让它，如果设备宽度小于 540px，包装器的宽度从 33.33% 变为 100%，但它似乎没有这样做。

我的媒体查询如下：

@media only screen and (max-width: 540px) {
  #wrapper {
    width: 100%;
  }
}

我的包装器的正常 css 如下：

#wrapper {
  width: 33.3%;
  margin: 0 auto;
  position: relative;
}

【问题讨论】：

【解决方案1】：

您必须将media query 放在样式表中其他规则的下方。您现在拥有它的方式（即样式表开头的媒体查询）被下面的一般规则（包含width: 33.3%;）覆盖。

【讨论】：