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

【问题标题】：How to create properly disjunct @media queries in a cross-compatible way?如何以交叉兼容的方式创建正确分离的@media 查询？
【发布时间】：2020-11-12 07:46:22
【问题描述】：

考虑以下 HTML：

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

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

如果屏幕宽度为 600px 或更大，我想应用一个盒子阴影。
如果屏幕宽度小于 600 像素，我想应用实心边框。

我的直觉是这样写查询：

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

&lt;div id="x"&gt;A&lt;/div&gt;

这在 Firefox 中完美运行，但在 Chrome 和 Safari 中，永远不会应用 not 查询。

我能想到其他三个选项：

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

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

我觉得以前有人会问过这个问题，但你不能用谷歌搜索 not 查询，因为你会发现“不工作”。

【问题讨论】：

标签： css media-queries

【解决方案1】：

根据 MDN 文档：

注意：在大多数情况下，当没有指定其他类型时，默认使用所有媒体类型。但是，如果使用 not 或 only 运算符，则必须明确指定媒体类型。

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

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

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

&lt;div id="x"&gt;A&lt;/div&gt;

【讨论】：