联合反向媒体查询

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 and source.

Answer 1

<div class="phone tablet"/> 不能在任何时候都可见，因为所有时间至少有一个你的 2 个媒体查询匹配，所以这个 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 的另一个更新。

联合反向媒体查询

Combined inverted media queries

css

media-queries