媒体查询：当我调整浏览器大小时不改变样式

Question

我有这个代码。当我将浏览器大小调整为 min-width: 480px 时，它不会将背景颜色更改为蓝色，将宽度更改为 100px

到目前为止，这是我的代码：

@media screen and (min-width: 480px) {
    .boxcontainer {
        background-color: blue;
        width: 100px;
    }
}
.boxcontainer{
        width: 1300px;
        background-color: green;
        height: 200px;
      }

<div class="boxcontainer">
  
</div>

谢谢

Answer 1

调换CSS规则的顺序，把你的CSS改成

.boxcontainer {
    width: 1300px;
    background-color: green;
    height: 200px;
}
@media screen and (min-width: 480px) {
    .boxcontainer {
        background-color: blue;
        width: 100px;
    }
}

如本 JSFiddle 示例所示。背景为蓝色只要宽度不小于480px，否则变为绿色

如果你打算做相反的事情，因为 .boxcontainer{width:1300px} 让我觉得你想要那个 ，那么只需将媒体查询断点更改为 @media screen and (max-width: 480px) 而不是 @media screen and (min-width: 480px).

你可以在这个JSFiddle

中看到第二个选项

媒体查询：当我调整浏览器大小时不改变样式

Media Query: Doesn't Change Style when i resize the browser

html

css

media-queries