13

级联使 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在Query Bcolor中具有的文本，但是如果您选择在将来更改，那么您将管理两个声明。（当然，这一行代码没有这样的问题，但想象一下还有很多其他的声明和选择器。）

  2. max-width: 799px通过使用和之类的像素值来避免重叠min-width: 800px，但是你使用的是像素——我猜它们可能分别是 49.9375em 和 50em。虽然如果默认值不再是 16em 并且某些东西被四舍五入怎么办？而且我们仍然不确定在那个间隙会发生什么。（打破时空连续性的黑洞？）

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

4

2 回答 2

12

@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.5 像素（显然与前者匹配）。

仍然应该指出的是，在舍入时我注意到了一些怪癖。也就是说，我还没有找到一个可以规避媒体查询并最终无法从任何一组规则中接收样式的小数值（顺便说一句，这是可能发生的最糟糕的情况，所以不用担心关于潜在地创造时空裂缝）。这一定意味着浏览器——至少，我测试过的 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)是 used还是@media (max-width: 49.99999em)used（我也对此感到惊讶）...

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

于 2012-11-30T16:21:07.250 回答
0

对我来说，最好的方法是保持 0.01em 的差距：

@media (min-width: 20em) and (max-width: 44.99em) {
    body { color: red; } /* supposed to be unique for this width */
}
@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

我建议您阅读本文以了解详细信息以及防止媒体查询重叠的不同解决方案的比较。

干杯，托马斯。

于 2013-11-07T22:33:54.713 回答