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。< / p>

一种解决方案是

@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的另一次更新。

组合倒置媒体查询

1 个答案: