CSS特异性，媒体查询和最小宽度

Question

我正在考虑响应式网页设计和“移动优先”方法来重新设计我的博客-简而言之，我正在尝试使用最小宽度来避免任何形式的复制或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。这没有道理！

我可以继续使用最小宽度并在不使用更强大的选择器或最大宽度的情况下有效地覆盖更高分辨率的声明吗？

Answer 1

我希望当我在600px及更高的分辨率下会得到2.2em h2，而我会得到1.7em。这没有道理！

这说得通。如果媒体实现了min-width: 600px，那么它也应该实现min-width: 320px;
换句话说，宽度至少为600像素的任何事物也至少宽度为320像素，因为600大于320。

由于两个媒体查询都评估为true，所以最后发生的规则在级联中具有优先权，使您的代码等效于此：

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

这就解释了为什么2.2em出现在您的开发人员工具中但没有产生明显效果的原因。

最简单的解决方法是切换@media块，以便您的规则以正确的顺序级联：

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