我希望当我在600px及更高的分辨率下会得到2.2em h2,而我会得到1.7em。这没有道理!
这说得通。如果媒体实现了
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; }}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)