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

我正在重新设计我的博客，考虑到响应性的网页设计和“移动优先”的方法——简言之，我试图使用最小宽度来避免任何形式的复制或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.2emh2，但我得到的是1.7em。。在我的开发工具中，我看到有2.2em声明，但另一个声明优先。。这没有道理

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

当我的分辨率达到600px及以上时，我希望得到2.2emh2，但我得到的是1.7em。。在我的开发工具中，我看到有2.2em声明，但另一个声明优先。。这没有道理

这是有道理的。如果介质满足

最小宽度：600px

，则它还应满足

最小宽度：320px

；换句话说，任何至少600像素宽的东西也至少有320像素宽，因为600大于320

由于两个媒体查询的计算结果均为true，因此最后出现的规则在级联中优先，使您的代码等效于以下内容：

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

这就解释了为什么

2.2em

出现在开发人员工具中，但没有明显的效果

最简单的修复方法是切换

@媒体

块，以便规则按正确顺序级联：

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

---

为了澄清博尔顿时钟的答案，浏览器就是这样想的：它点击了第一个媒体查询，‘哦，我的最小宽度是600！让我们把我的字体大小设置为2.2米！”。然后继续下一个媒体查询，“哦，我的最小宽度是320！”！现在让我们把我的字体设置为这个！”。独角兽的答案是正确的，但也许你应该考虑最大宽度而不是最小宽度。如果您想在较小的屏幕上显示较小的H2大小，可以在不进行媒体查询的情况下编写

font-size:2.2em

，然后在查询

max-width:599px

时编写

font-size:1.7em

。max-width实际上不是一个好的做法。。很难解释，但当你使用“最大宽度”时，你最终会重复写CSS。。检查CSS的特殊性还考虑了外观的顺序。。。有时候，当你花12小时在电脑前时，你会错过最明显的事情！谢谢独角兽：）我不明白。为什么一个至少600像素宽的介质也至少有320像素宽？这真的意味着它可以是320px宽（例如，通过调整浏览器窗口的大小使其更小）？@John Wang:600px比320px宽。所以如果某个东西是600px或更宽，那么它也是320px或更宽。这就是“至少”的意思。@BoltClock谢谢你，先生，明白了。在玩了一些示例代码之后，我意识到MinWidth可以读为“大于等于”。这使得理解起来更加简单：“如果屏幕宽度大于600px，请给我2.2em的字体大小”