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

Question

我正在尝试使用媒体查询来使网站（使用IE11）的div响应。

这是我的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" /> 

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

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