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

【问题标题】：Media query with default style doesn't work as intended具有默认样式的媒体查询无法按预期工作
【发布时间】：2013-12-11 09:28:41
【问题描述】：

这是我的代码：

@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}”。

【问题讨论】：

【解决方案1】：

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

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

.content {padding:10px;}

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

【讨论】：