Question

我正在尝试编写匹配两个范围之一的媒体查询，然后检查语句是否为false。这是为了能够组合custom media queries并且如果两者都不匹配则执行行为。示例查询如下所示：

/**
 * Intended behavior would be:
 * !((320px <= width <= 800px) || width <= 320px)
 */
@media not all and (min-width: 320px) and (max-width: 800px), (max-width: 320px) {}

但不幸的是这个查询与任何东西都不匹配;虽然单独使用语句确实有效。我很好奇上面的查询转换为什么（以及为什么），以及我如何在CSS媒体查询中正确地组合NOT。谢谢！

编辑：我正在寻找一种方法来合并2个预定义的媒体查询。不允许自己编辑查询。例如：

@media (max-width: 320px) {}
@media (min-width: 320px) and (max-width: 800px) {}

目标是混合并匹配custom media queries。一个不可能的答案也是一个可以接受的答案。

另见

Answer 1

逻辑应为!((320px <= width <= 800px) OR width <= 320px) =＆gt; !(320px <= width AND width <= 800px) AND !(width <= 320px) =＆gt; (!(320px <= width) OR !(width <= 800px)) AND (width > 320px) =＆gt; ((width < 320px) OR (width > 800px)) AND (width > 320px) =＆gt; ((width < 320px) AND (width > 320px)) OR ((width > 800px) AND (width > 320px))，正式的媒体查询应该看起来像

@media (max-width: 319.9999px) and (min-width: 320.0001px),
       (min-width: 800.0001px) and (min-width: 320.0001px) {}

PS。在这种特定情况下，查询可以简化为(width > 800px) =＆gt; !(width <= 800px)：

@media not all and (max-width: 800px) {}

媒体查询：用OR编写NOT

另见

1 个答案: