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

Question

我正在重新设计我的博客,其中考虑了响应式网页设计,以及"移动优先"方法 - 简而言之,我正在尝试使用min-width来避免任何类型的复制或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

我期待当我在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; }
}