组合倒置媒体查询

【问题标题】：Combined inverted media queries组合倒置媒体查询
【发布时间】：2016-04-29 23:03:51
【问题描述】：

我有生成否定媒体查询的 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。

【问题讨论】：

标签： css media-queries

【解决方案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。

如果您还希望在 .phone 和 .tablet 都被隐藏的情况下隐藏相关的 div，请添加

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

您的Fiddle 的另一个更新。

【讨论】：