CSS的特殊性，媒体查询和最小宽度(CSS specificity, Media Queries a

我重新设计我的脑海中响应网页设计的博客，与“移动第一”的方法 - 总之我试图用最小宽度，以避免任何形式复制或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声明是有的，但另一个优先。它没有任何意义！

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

我希望，当我在600px的决议和上面得到2.2em H2，而是我得到1.7em。在我开发工具我看到2.2em声明是有的，但另一个优先。它没有任何意义！

这说得通。如果媒体满足min-width: 600px ，那么它也应当满足min-width: 320px ; 换句话说，任何低于600像素宽也至少320个像素宽，因为600是高于320。

由于这两个媒体查询评价为真，即去年发生的规则在级联优先级，使您的代码等价于：

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