默认样式的媒体查询无法按预期工作

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;}

我打算将“.content {padding：10px}”设为默认样式。只有小于等于480px的屏幕宽度使用“.content {padding：4px}”。

Answer 1

如示例中的默认样式，它将覆盖已设置的任何内容。 CSS从上到下进行处理，任何指定多次的属性都将采用 last 指定的值。

因此，请将默认样式放在中。这样，如果@media查询匹配，它将覆盖已设置的默认样式10px。

.content {padding:10px;}

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