有没有一种方法可以取消 @media min/max-width/height？

Question

我使用http://www.w3.org/TR/css3-mediaqueries/来根据可用的视口设置不同的设计。

为了让我的搜索和替换工作正常，每次我决定调整截止点时，我想清楚地否定@ media（min-width：500px），它与（max-width：500px）相交，因此必须手动否定为（max-width：499px），这会破坏搜索和替换功能。

我尝试过not (min-width: 500px)，但似乎根本不起作用。有没有一种方式可以否定@ media（min-width：500px），使负查询仍然包含500px，以便我的搜索和替换工作正常？

- cnst

---

我不会这样做，因为我从不使用min-width。我会先设置大屏幕的样式，再逐渐适应小屏幕... @media screen and (max-width:1025px){ /// 覆盖 } @media screen and (max-width:769px){ /// 覆盖 1024px }因为CSS是语义化的，你总是可以通过较小的屏幕宽度来覆盖较大的屏幕宽度。 - user1712691

为什么 not (min-width: 500px) 没有起作用，假设你按照文档的要求写成了 not all and (min-width: 500px)？ - user663031

太棒了！将尝试 not all and。但是，如何将其与其他语句合并？例如，如何翻译 (min-width: 840px) and (max-height: 399px)，其中只有 99 需要否定？ - cnst

我之前留了一条评论，然后看到你想做什么。这个怎么样？虽然我从来没有尝试过，因为我总是在我想要的断点处使用max-width，但你能像这样组合吗？@media screen (min-wdth:500px) and (max-width:499px) {....} 我仍然认为从大到小做比较好，因为在最大宽度上放置断点更好，而且不需要最小宽度。 - user1712691

Answer 1

试一下

@media not all and (min-width: 500px) {
  //selectors
}

根据您的需求，您也可以尝试其他方法。

@media not screen and (device-width:500px)

这个不起作用。

 not (min-width: 500px) {}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

- master_dodo

---

很酷！将尝试“not all and”。但是，如何与其他语句合并呢？例如，如何翻译“(min-width: 840px) and (max-height: 399px)”这个条件，其中只有“99”的条件需要否定？ - cnst

我不明白这行代码中的“99”是什么意思：“（最小宽度：840像素）和（最大高度：399像素），只有99需要被否定”。另外，你想看一下纵横比媒体查询规则吗？那也可能会有所帮助。 - master_dodo

不，我认为你的 and (not all and 的例子是不正确的-- 我认为 not 只能否定整个表达式（根据你自己提供的链接），而且由于它不能在 not 中包含 or，看起来没有办法做一个负的 and。 :-( - cnst

不，它在语法上是不正确的，而且它肯定实际上也无法工作。 - cnst

不，你错了，即使你添加缺失的括号，它也绝对不是语法上正确的。你不能在and之后使用not。这基本上在你链接到的文档中已经清楚地说明了！ - cnst