当多个 CSS 媒体查询重叠时会发生什么？

媒体查询重叠：级联称霸

当多个媒体查询匹配相同的视口大小时会发生什么？答案就在于 CSS 的核心原则：级联和重叠规则。

级联实际操作

@media 规则就像常规 CSS 规则一样遵循级联。当多个 @media 规则匹配时，将应用所有匹配样式，并且级联会解决任何冲突。换句话说，最后声明的、最具体的样式规则获胜。

断点处重叠

恰好在 20em 和 45em 处，您的第一个和第二个媒体查询，以及您的第二个和第三个媒体查询将分别匹配。浏览器应用这两个规则中的样式并相应地级联。如果存在冲突的声明，则最后声明的规则优先。

细分示例

考虑以下代码：

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

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

At 20em宽，两个媒体查询都匹配。级联覆盖 display: none 和 display: block，float: left 适用于具有 .sidebar 类的元素。

通过互斥避免重叠

防止重叠，确保您的媒体查询是互斥的。请记住，最小和最大表示包容性。 (min-width: 20em) 和 (max-width: 20em) 都匹配 20em 宽的视口。

分数像素值

CSS 中的像素值是逻辑像素。我无法找到报告视口宽度分数像素值的浏览器。 iOS 上的 Safari 会对小数值进行舍入，以确保 (max-width: 799px) 或 (min-width: 800px) 至少匹配一条规则，即使视口为 799.5px。

以上是当多个 CSS 媒体查询重叠时会发生什么？的详细内容。更多信息请关注PHP中文网其他相关文章！