什么是CSS媒体查询重叠的规则？(What are the rules for CSS media

我们如何从空间媒体查询准确，以避免重叠？

例如，如果我们考虑的代码：

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

会发生什么事，在所有支持的浏览器，正好20em，和45em？

我见过的人使用：之类的东西799px，然后800像素，但对于799.5像素的屏幕宽度？（显然不是一个普通显示器，但视网膜上的一个？）

我很想了解这里的答案考虑规范。

Answer 1:

什么是CSS媒体查询重叠的规则？

级联。

@media规则是透明的级联，所以当两个或两个以上@media规则同时匹配，浏览器应适用于所有符合该规则的样式，以及相应的解决措施级联。 ¹

会发生什么事，在所有支持的浏览器，正好20em，和45em？

正好20em宽，你的第一个和第二个媒体查询将两者相匹配。浏览器将适用于这两种风格@media相应的规则和级联，所以如果有需要重写任何冲突的规则，最后宣布一个胜（占特定选择， !important ，等等）。同样，对于第二和第三媒体查询时，视口正好是45em宽。

考虑到你的示例代码，用一些实际的样式规则补充说：

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

当浏览器窗口正好是20em宽，这两个媒体查询将返回true。通过级联， display: block重写display: none和float: left将应用于与任何类元件上.sidebar 。

你可以把它看作是适用的规则，如果媒体查询不在那里开始：

.sidebar { display: none; }
.sidebar { display: block; float: left; }

如何级联的另一个例子发生在一个浏览器符合两个或两个以上媒体查询可以发现这对方的回答。

被警告，不过，如果你有没有在这两个重叠的声明@media规则，那么所有的这些规则将适用。这里发生的是声明的两个工会 @media规则，不只是后者完全推翻前......这给我们带来了你刚才的问题：

我们如何从空间媒体查询准确，以避免重叠？

如果你想避免重叠，您只需编写是互斥的媒体查询。

请记住， min-和max-前缀表示“最小包容性”和“最大包容性”; 这意味着(min-width: 20em)和(max-width: 20em)都将匹配视口这正是20em宽。

它看起来像你已经有一个例子，它给我们带来了最后一个问题：

我见过的人使用：之类的东西799px，然后800像素，但对于799.5像素的屏幕宽度？（显然不是一个普通显示器，但视网膜上的一个？）

这个我不是很确定; 在CSS像素值全部是逻辑像素，并且我已经很难找到一个浏览器，将一个视口宽度报告分数像素值。我已经试过了一些尝试I帧，但一直没能拿出任何东西。

从我的实验，这似乎Safari浏览器在iOS轮所有分数像素值，以确保任何一个max-width: 799px和min-width: 800px匹配，即使视口是真的799.5px（这显然符合前）。

¹ _{虽然没有这无论是在明确规定有条件的规则模块或级联模块（后者目前被提名为重写），级联的暗示发生正常的，因为该规范只是说在任何应用样式和所有@media规则匹配浏览器或媒体。}

Answer 2:

calc()可以使用，以解决这个(min-width: 50em and max-width: calc(50em - 1px)将堆叠正确），但浏览器的支持很差，我不会推荐它。

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Answer 3:

我曾尝试如下建议：

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

但发现这不是一个好主意，因为它无法在Chrome现在无论是工作，我的Ubuntu桌面上或在我的Android手机。（如这里说明：计算（）媒体查询中不工作），但是，我发现了一个更好的办法？

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

然后咣当！

文章来源: What are the rules for CSS media query overlap?