媒体查询：调整浏览器大小时不会更改样式

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}让我认为您想.boxcontainer{width:1300px} ，然后只需将媒体查询断点更改为@media screen and (max-width: 480px)而不是@media screen and (min-width: 480px) 。

您可以在此JSFiddle中看到第二个选项