33

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

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

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

4

1 回答 1

36

我希望当我在 600 像素及以上的分辨率下获得 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; }
}
于 2012-04-25T19:09:00.280 回答