CSS：僅在特定媒體查詢中應用規則？

Question

以下情況...

/* @media screen and (min-width: 480px) */ 
@media screen and (min-width: 30em) { 
    #el { background:red; } 
} 

/* @media screen and (min-width: 640px) */ 
@media screen and (min-width: 40em) { 
    #el { background:none; } 
} 

所以如果視口小於480像素#el小應該是紅色的，如果視口較寬它應該應用沒有背景色！

是否有一些css技巧只適用於min-width: 30em這個規則，所以我不必在下一個媒體查詢中「重置」它？

想法和想法呢？ 提前謝謝！

Answer 1

嘗試以這種方式

@media screen and (min-width: 30em) and (max-width: 40em) { 
    #el { background:red; } 
} 

例如小提琴：http://jsfiddle.net/2ySNu/

Answer 2

如果你想爲#e1背景，以低於某個轉折點是紅色的，你應該使用max-width。如果您想爲視口創建大於特定斷點的樣式規則 - 那麼您應該使用min-width。在你的例子中：@media screen and (min-width: 30em)，只有當視口大於30em時，背景纔會變紅 - 一旦達到40em，它將恢復爲無（基於你的其他規則）。爲了設置小於480像素的視口背景，只需使用max-width即可，您甚至不必擔心「重置」，因爲一旦視口超過480像素，該規則將不適用。

/* @media screen and (max-width: 480px) */ 
@media screen and (max-width: 30em) { 
    #el { background:red; } 
} 

記住，你在min-width聲明的規則將適用於具有寬度大於你指定斷點寬度視口。而在max-width中聲明的規則將應用於小於/小於斷點寬度的視口。