为什么较低的最小宽度媒体查询会覆盖较高的最小宽度媒体查询？

CSS 特异性、媒体查询和最小宽度：了解优先级

使用响应式方法重新设计网站时，保持特异性并理解媒体查询的最小宽度行为- 宽度至关重要。但是，尝试覆盖 CSS 值时会出现一个常见的陷阱，因为较低的最小宽度设置可能会优先。

考虑以下示例：

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

分辨率为 600 像素及以上，预计

的字体大小为元素应为 2.2em。然而，输出显示 1.7em。尽管开发人员工具中出现了 2.2em 声明，但它被较低的最小宽度查询中的 1.7em 设置覆盖。

了解媒体查询中的优先级

此行为是由评估媒体查询的方式造成的。当多个媒体查询应用于一个元素时，级联顺序中最后出现的规则优先。在这种情况下，由于对于 600 像素及以上的分辨率，两个媒体查询的计算结果均为 true，因此后一个查询会覆盖前一个查询。

解决问题

要解决此问题，重新排列媒体查询块，以便规则按预期顺序级联：

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

通过首先放置较低的最小宽度查询，2.2em 字体大小现在将在 600px 及以上的分辨率下生效.

结论

理解 CSS 特异性和媒体查询的级联顺序对于有效的响应式设计至关重要。通过仔细考虑媒体查询的顺序，您可以确保代码按预期运行并在各种屏幕尺寸上实现所需的视觉输出。

以上是为什么较低的最小宽度媒体查询会覆盖较高的最小宽度媒体查询？的详细内容。更多信息请关注PHP中文网其他相关文章！