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

Question

我正在重新设计我的博客，并考虑到响应式网页设计，并且首先是＆＃34;移动设备＆＃34;方法 - 简而言之，我试图使用min-width来避免任何类型的复制或css ..没有显示：none＆＃39; s等。

我的问题是，当我确实需要覆盖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声明在那里，但另一个优先。它没有意义！

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

Answer 1

  

我希望当我在600px及以上的分辨率下得到2.2em h2，但我得到1.7em ..在我的开发工具中，我看到2.2em声明在那里，但另一个优先考虑..没有意义！

这很有道理。如果媒体满足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; }
}