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.. 在我的开发工具中我看到 2.2em 声明在那里，但另一个优先..这没有意义!

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

Answer 1

I'd expect when I'm in resolutions of 600px and above to get a 2.2em h2, but instead I get 1.7em.. In my Dev tools I see that the 2.2em declaration is there, but the other one takes precedence.. It doesn't make sense!

这是有道理的。如果媒体满足 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 block ，让你的规则以正确的顺序级联:

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