媒体查询。我在这里犯了什么愚蠢的错误？

Question

这里是我的代码：

@media (max-width: 480px) { 
    .content {padding:4px;} 
} 

@media (min-width:481px){ 
    .content {padding:10px;} 
} 

它可以正常工作。

@media (max-width: 480px) { 
    .content {padding:4px;} 
} 

.content {padding:10px;} 

我打算做“内容{填充：10px的}”默认样式，但正如我打算当我改变它像下面这是行不通的。只有屏幕宽度小于等于480px使用“.content {padding：4px}”。

我想我犯了一个愚蠢的错误或缺少一些非常基本的mediaquery。有谁能告诉我我错过了什么吗？

Answer 1

使用上例中的默认样式，它将覆盖已经设置的任何东西。 CSS从上到下进行处理，并且多次指定的属性将采用指定值的上一个。

因此，把默认样式先。这样，如果@media查询匹配，它将覆盖已经设置的10px的默认样式。

.content {padding:10px;} 

@media (max-width: 480px) { 
    .content {padding:4px;} 
}