调整浏览器大小时CSS媒体查询无效

Question

我尝试使用媒体查询在网站上进行div响应（使用IE11）。

这是我的CSS：

@media screen and (max-width: 400px) { // Tried with "only screen" also

  .divStyle {
      background-image:none;
      background-color:red;
      background-position:right;
      color:#fff!important;
      height:140px;
      position:relative;
      top:-6px;

    }

}

.divStyle {
  background-image:url('/images/image.jpg');
  background-position:right;
  color:#fff!important;
  padding:20px;
  height:190px;
  position:relative;
  top:-6px;

}

我还在Head部分添加了metatag。

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

但是当我调整窗口大小时，它仍然无法响应。

Answer 1

在您的情况下，没有媒体查询的规则在具有媒体查询的规则之后。所以它会覆盖规则。

将订单更改为此。

.divStyle {
  background-image:url('/images/image.jpg');
  background-position:right;
  color:#fff!important;
  padding:20px;
  height:190px;
  position:relative;
  top:-6px;

} 

@media screen and (max-width: 400px) { 
  .divStyle {
      background-image:none;
      background-color:red;
      background-position:right;
      color:#fff!important;
      height:140px;
      position:relative;
      top:-6px;
    }
}