與CSS3堆疊媒體查詢

Question

我試圖在CSS中堆疊媒體查詢，似乎無法讓它正常工作。我試圖實現的是對媒體查詢的任何有一套css規則。我通常知道我可以使用和使它適用於不同的規則，但在這種情況下，我試圖處理特定於供應商的前綴，以便瀏覽器不會滿足所有條件。

這裏是我到目前爲止有：

@media only screen and (min--moz-device-pixel-ratio: 2), 
@media only screen and (-o-min-device-pixel-ratio: 2/1), 
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
@media only screen and (min-device-pixel-ratio: 2) { 
    /* My rules go here */ 
} 

什麼是堆棧這樣的規則正確的方法是什麼？此外，如果有關於此主題的更多信息，我想查看一下。

Answer 1

正確的做法應該是隻有一個@media在一開始，接着是逗號分隔的媒體查詢列表：

@media only screen and (min--moz-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
    /* Your rules go here */ 
} 

@media聲明不同媒體規則時，才允許和不用於在單個規則中分隔多個媒體查詢。