如何正确进行最小宽度媒体查询级联？

通过最小宽度媒体查询级联 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 像素或更大时，两个媒体查询都为 true。然而，第二条规则在级联中出现得较晚，因此它优先并应用较小的 1.7em 字体大小。

分辨率

有效地覆盖更高版本中的声明使用最小宽度的分辨率，无需诉诸更强的选择器或最大宽度，您可以切换媒体的顺序查询：

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

这可确保当屏幕宽度至少为 600px 时应用较大的字体大小。这将为您提供您期望的级联特异性，并优先考虑较高的最小宽度。

以上是如何正确进行最小宽度媒体查询级联？的详细内容。更多信息请关注PHP中文网其他相关文章！