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;

}

我还在标题部分添加了元标记。

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

但是当我调整 window 大小时它仍然没有响应。

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

CSS 调整浏览器大小时媒体查询不起作用

CSS media query not working when resizing browser

html

css

media-queries