正確使用媒體查詢

Question

有人可以證明媒體查詢的正確用法嗎？我有相當多的響應代碼 - 即下面的簡化版本。如果這有意義，我希望第二個媒體查詢繼承前一個媒體的屬性？即在min-width 201px時，p應該具有30px的字體大小和文本對齊中心。目前，我不得不復制代碼，在這種情況下，代碼很好，但代碼量很大，它非常可怕並且有99％的冗餘。即

media query 1 - p{font-color:blue;} 
media query 2 - p{font-color:blue; font-size:5px;} 
media query 3 - p{font-color:blue; font-size:5px; text-align center;} 

我想有這麼在媒體查詢3我可以做p {文本對齊：中心;}，其餘的繼承。

@media query screen and (min-width:100px) and (max-width:200px) 
    { 
     p{font-size:30px;} 
    } 

    @media query screen and (min-width:201px) and (max-width:300px) 
{ 
    p{text-align:center;} 
}  

Answer 1

如果您希望早期媒體查詢中的規則適用，請將它們寫入，以便它們不會明確排除後面的規則。

即刪除max-width規則。