媒体查询宽度100%无效

时间:2018-01-18 21:49:09

标签: html css3 mobile responsive-design media-queries

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 个答案:

答案 0 :(得分:0)

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

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