如何以交叉兼容的方式创建正确分离的@media 查询？

Question

考虑以下 HTML：

<div id="x">A</div>

并说我想对其应用以下样式规则：

如果屏幕宽度为 600px 或更大，我想应用框阴影。
如果屏幕宽度小于 600px，我想应用实线边框。

我的直觉是像这样编写查询：

@media (min-width: 600px)
{
    #x { box-shadow: 10px 5px 5px green; }
}
@media not (min-width: 600px)
{
    #x { border: solid 1px #666; }
}

<div id="x">A</div>

这在 Firefox 中完美运行，但在 Chrome 和 Safari 中，从未应用 not 查询。

我能想到其他三个选项：

@media (max-width: 599px)
如果浏览器缩放级别不是 100%，这有可能应用两种样式，参见this GitHub issue。
@media (max-width: 600px)
当 window 宽度恰好为 600 像素时，保证应用这两个查询。
将其中一种样式转储到默认规则集中并“撤消”它在任何地方使用 <attribute>: default 手动执行的所有操作。
这简直不实用。

有什么方法可以在不遗漏边缘情况的情况下完成上述操作吗？

我觉得以前有人问过这个问题，但是您不能 Google 查询 not，因为您会发现“不起作用”。

Answer 1

根据 MDN 文档：

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

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

Chrome/Safari 似乎更喜欢在“not”之后添加“all”媒体类型

@media (min-width: 600px)
{
    #x { box-shadow: 10px 5px 5px green; }
}
@media not all and (min-width: 600px)
{
    #x { border: solid 1px #666; }
}

<div id="x">A</div>

如何以交叉兼容的方式创建正确分离的@media 查询？

How to create properly disjunct @media queries in a cross-compatible way?

css

media-queries