有没有办法否定@media min/max-width/height？ [复制]答案

【问题标题】：Is there a way to negate @media min/max-width/height? [duplicate]有没有办法否定@media min/max-width/height？ [复制]
【发布时间】：2016-04-12 21:54:35
【问题描述】：

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

为了让我的搜索和替换工作，每次我决定调整分界点时，我都想明确否定与(max-width: 500px) 相交的@media (min-width: 500px)，因此，必须手动将其否定为(max-width: 499px)，这会破坏搜索和替换。

我试过not (min-width: 500px)，但它似乎根本不起作用。有没有办法否定@media (min-width: 500px)，这样否定查询中仍然会有500px，以便我的搜索和替换工作？

【问题讨论】：

我不会这样做我从不使用最小宽度。我开始大并向下工作... [at]media screen and (max-width:1025px){ /// overrides } [at]media screen and (max-width:769px){ /// overrides 1024px } As css是语义的，你总是会以这种方式用较小的屏幕尺寸覆盖。
为什么not (min-width: 500px) 不起作用，假设您遵循文档并将其写为not all and (min-width: 500px)？
酷！将尝试not all and。但是，将它与其他语句合并呢？例如。我如何翻译(min-width: 840px) and (max-height: 399px)，其中只有99 必须被否定？
我早些时候发表了评论，然后看到了您要做什么。那这个呢？虽然没有尝试过，因为我总是在我想要的断点处使用 max-width，但是你能像这样组合它吗？ @media screen (min-wdth:500px) and (max-width:499px) {....} 我仍然认为从大到小更好，因为在最大宽度上设置断点更好，不需要最小宽度。

标签： css media-queries negation

【解决方案1】：

试试这个

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

您也可以根据自己的需要尝试，

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

这行不通

 not (min-width: 500px) {}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

酷！将尝试not all and。但是，将它与其他语句合并呢？例如。我如何翻译(min-width: 840px) and (max-height: 399px)，其中只有99 必须被否定？
我将“最大”编辑为“最小”。我错误地添加了那个。另外，我不确定当您可以在媒体查询中使用“不属于”宽度或设备宽度时为什么要否定。您能否详细说明您的需求，因为我认为这可以通过良好的 min 来避免- 和最大宽度媒体规则
我没有在“(min-width: 840px) and (max-height: 399px), 其中只有 99 必须被否定”这一行中得到什么是“99”。另外，你想看看纵横比媒体查询规则！这也可能有帮助。
我接受这个；如果您解决上述评论，我也会 +1。 :-)
+1！！我不是来求积分的。只要答案对您的要求有所帮助，那么对您和他人都有好处。此外，在我解决您的上述评论之前，如果您看到我的评论询问您的评论中是否有错字，那就更好了。如果其中的“99”是“399”，那么可能的逻辑操作是@media screen and (min-width: 840px) and (not all screen and (max-height: 399px) ) {}。我想这就是你问的。但总的来说，我们不需要进行如此复杂的逻辑操作，除非你真的需要它们或者你正在试验：P