倒相結合媒體查詢

Question

我有一個生成一個否定媒體查詢如下SASS代碼（基於Exact NOT(Inverse) of CSS Media Query）：

@media not screen and (max-width: 420px) { 
    .phone { 
     display: none; 
    } 
} 
@media not screen and (min-width: 421px) and (max-width: 992px) { 
    .tablet { 
     display: none; 
    } 
} 

爲什麼不這項工作聯合班最後一個div？

<div class="phone">visible on: phone</div> 
<div class="tablet">visible on: tablet</div> 
<div class="phone tablet">visible on: phone and tablet</div> 

我顛倒邏輯的原因是因爲，如果我將圍繞做它的其他方式（顯示隱藏的代替）。我不知道每個元素是什麼顯示類型（塊，內聯等）和我can't set it back to it's previous value。

Example和source。

Answer 1

<div class="phone tablet"/>隨時無法看到，因爲所有時間至少有一次您的兩個媒體查詢匹配，所以此div至少從其中一個獲得display: none。

一個解決辦法是

@media not screen and (max-width: 420px) { 
    .phone:not(.tablet) { 
     display: none; 
    } 
} 
@media not screen and (min-width: 421px) and (max-width: 992px) { 
    .tablet:not(.phone) { 
     display: none; 
    } 
} 

更新到您Fiddle。

如果你也想有問題的div如果兩者.phone和.tablet被隱藏被隱藏，加

@media not screen and (max-width: 992px) { 
    .phone.tablet { 
     display: none; 
    } 
} 

另一個更新您的Fiddle。