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

Question

这是我正在处理的代码的代码笔的链接。我正在尝试获取它，以便如果设备宽度小于 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%;(覆盖。

https://codepen.io/anon/pen/GyPRVG