如何避免媒体查询重叠？

一尘不染

如何避免媒体查询重叠？

css

级联正是CSS变得特别而强大的原因。但在媒体查询的情况下，重叠可似乎有问题。

考虑以下CSS（CSS媒体查询重叠的连续规则）：

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

因此，当屏幕正好为45em宽时，将根据标准CSS级联来处理45em处的重叠：

所有max-width: 45em定义都将首先应用，
min-width: 45em并将在此之后全部应用。

请考虑以下两个条件：

通常black，所有文本都是，但是 查询A 是唯一的并且具有color: red。
由于 查询B 适用于较大的视口，因此其文本具有CSS font-size: larger。

因此，在恰好为45em的宽度处，我们将得到 大而红色的文本 。 避免这种情况的最佳解决方案是什么？

我看到两种可能性：

重新声明要color: black在 Query B中 包含的文本，但是如果您以后选择更改，则要管理两个声明color。（当然，这单行代码不是这样的问题，但是可以想象还有很多其他的声明和选择器。）
通过使用像max-width: 799px和这样的像素值来避免重叠min-width: 800px，但是您使用的是像素-我猜它们分别可能是49.9375em和50em。但是，如果默认值不再是16em而又四舍五入怎么办？而且我们仍然不确定在这个差距会发生什么。（打破时空连续性的黑洞？）

两者都有缺点…还有其他想法吗？

阅读 384

2020-05-16

共1个答案

一尘不染

@media为任何给定的媒体查询创建两个互斥的块的唯一可靠方法是not在其中一个块中取反。不幸的是，这意味着对每个@media块重复一次媒体查询。因此，例如：

@media (max-width: 49.9375em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

您将拥有：

/* 
 * Note: Media Queries 4 still requires 'not' to be followed by a
 * media type (e.g. 'all' or 'screen') for reasons I cannot comprehend.
 */
@media not all and (min-width: 50em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

这在缩小范围媒体功能（例如width和）之间的差距方面非常有效，height因为它实际上将其变成了“或非”方案。但是，就像前两个选项一样，它也不是完美的：如上所述，您必须重复两次相同的媒体查询，然后将not其中一个添加。没有条件规则3中@media所述的if / else构造。

尽管我在回答上一个问题时提到了这一点：

从我的实验看来，iOS上的Safari似乎会舍入所有小数像素值以确保max-width: 799px和之一min-width: 800px匹配，即使视口实际上是799.5px（显然与前者匹配）也是如此。

应该指出的是，在四舍五入时，我注意到了一些怪癖。不过，我一直没能找到一个分数值，将回避双方
媒体查询，最终没有从任一组规则（其中，顺便说一句，这是最坏的情况接受的风格，所以不用担心关于可能创建时空裂痕的内容）。这必须意味着浏览器（至少是我测试过的Safari）在确保它们满足媒体查询方面做得很合理，即使您的值不同（相差1个CSS像素）。

但是，当涉及到在桌面浏览器上可以观察到的较大间隙的单元时，就像ems一样，存在较大的误差范围。例如，有一条评论建议使用49.99999em而不是比49.9375em更为随意的内容，但显然存在区别，至少默认字体大小为16px。

我简化了代码，将媒体查询更改为使用十进制值，然后将代码放入jsFiddle中：

@media (max-width: 49.9375em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

如果将“结果”窗格的大小调整为正好为800像素（文本将更新以指导您前进），则实际上最终会根据[@media (max-width: 49.9375em)使用了还是[@media (max-width:49.99999em)使用了不同的结果（我也对此感到惊讶）…

无论哪种方式，您都是对的：选项2也有其缺点。老实说，我并不特别喜欢它，因为我不想打破我无法控制的设备和用户代理怪癖。如果您像我一样，我认为最好以更警惕您的代码的代价（？）来解决重新声明规则的不便之处，因为作为作者，这至少仍然在您的控制范围之内。

2020-05-16