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

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