媒體查詢。我在這裏犯了什麼愚蠢的錯誤？

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