使用最小宽度的媒体查询时如何避免 CSS 特异性冲突？

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

直观上，人们会预计 2.2em 字体大小适用于 600px 以上的分辨率。但是，正如您所观察到的，320px 最小宽度媒体查询中定义的 1.7em 字体设置会覆盖 2.2em 设置。

出现这种情况是因为对于高于 600px 的分辨率，两个媒体查询的计算结果都为 true。在这种情况下，CSS 级联中最后声明的规则（即 1.7em 设置）优先。

克服优先级问题

要解决此优先级问题，您有两个主要选项：

1. 重新排列媒体查询：切换媒体查询的顺序，使最小宽度较高的查询排在最后。这可确保 2.2em 字体大小正确应用于 600px 以上的分辨率。
2. 使用特异性： 通过添加额外的选择器来提高 2.2em 规则的特异性。例如，您可以使用元素选择器 h2.main 覆盖 320px 最小宽度查询中定义的通用 h2 规则。

推荐

使用通常建议使用第一个选项，因为它可以保持 CSS 结构的清晰度并避免进行特殊性调整。通过按如下方式重新排列媒体查询，您可以确保实现您想要的行为：

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

以上是使用最小宽度的媒体查询时如何避免 CSS 特异性冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！