Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢

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

中看到第二个选项

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

1 个答案: