媒体查询宽度100％无效

Question

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

Answer 1

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