如何避免媒体查询重叠？

Question

级联是使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宽时,45em处的重叠将根据标准CSS级联进行处理:

• 所有max-width: 45em定义将首先应用,
• 所有这些都min-width: 45em将在此后应用.

考虑以下两个条件:

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

因此,在45em的宽度处,我们会得到大而红的文本.避免这种情况的最佳解决方案是什么？

---

我看到两种可能性:

1. 重新申报有文字color: black的查询乙,但此时你管理的两个声明,如果你选择改变color的未来.(当然,这一行代码没有这么大的问题,但想象一下还有很多其他的声明和选择器.)

2. 通过像素值类似避免重叠max-width: 799px和min-width: 800px,但此时你使用像素-我想他们可能是分别49.9375em和50em.虽然如果默认值不再是16em并且某些内容被四舍五入怎么办？我们仍然不确定在那个差距发生了什么.(打破时空连续体的黑洞？)

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

Answer 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;
    }
}

交互式jsFiddle演示

这是非常有效的,在关闭与范围媒体功能,如间隙width和height,因为它本质上变成一个非此即彼的情形这一点.但是,就像你的前两个选项一样,它并不完美:如上所述,你必须重复相同的媒体查询两次,并添加not到其中一个.@media如条件规则3中所述,没有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也有其缺点.说实话,我并不是特别喜欢它,因为我不想对我无法控制的设备和用户代理怪癖感到头疼.如果你像我一样,我认为最好不要再为你的代码更加警惕地重新规定你的规则(？),因为这至少仍然在你作为作者的控制范围之内.