在媒体查询中使用'min-width”时，如何确保 CSS 规则正确应用？

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

使用“移动优先”方法实现响应式网页设计时，最小 - width 允许设计者根据设备宽度定义 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; }
}

理想情况下，600px 以上的分辨率应显示 2.2em 的 h2 字体大小。但是，1.7em 声明优先。

解决方案

媒体查询在特异性层次结构上运行，其中最具体的规则会覆盖那些特异性较低的规则。在上面的示例中，第一个媒体查询更具体，因为它指定了更高的最小宽度。

正确的方法是重新排序媒体查询，以便更具体的规则，将字体大小设置为 2.2em , 最后出现：

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

这可确保 600 像素以上分辨率所需的 CSS 规则生效，即使它具有较低的 min-width 值。

以上是在媒体查询中使用'min-width”时，如何确保 CSS 规则正确应用？的详细内容。更多信息请关注PHP中文网其他相关文章！