CSS特性，媒体查询和最小宽度 [英] CSS specificity, Media Queries and min-width

问题描述

我在重新设计我的博客时考虑到响应式网页设计，以及移动第一方法 - 总之，我试图使用min-width避免任何种类的复制或CSS。无显示：无..

I'm redesigning my blog with responsive web design in mind, and the "mobile first" method - In short I'm trying to use min-width to avoid any kind of replication or css.. no display:none's etc..

我的问题是，当我需要重写一个CSS值，较低的最小宽度优先。示例：

My problem is that when I do need to over-write a CSS value, the lower min-width takes precedence. Example:

@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声明是有，但另一个优先。这是没有意义！

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!

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

Could I keep using min-widths and effectively overwrite declarations in higher resolutions without using stronger selectors or max-width..?

推荐答案

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

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.

It makes sense. If the media fulfills min-width: 600px, then it should also fulfill min-width: 320px; in other words, anything that's at least 600 pixels wide is also at least 320 pixels wide, because 600 is greater than 320.

由于这两个媒体查询均为真，规则在级联中优先，使您的代码等价于：

Since both media queries evaluate to true, the rule that occurs last takes precedence in the cascade, making your code equivalent to this:

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

这解释了为什么会出现 2.2em

That explains why the 2.2em appears in your developer tools but doesn't take apparent effect.

最简单的解决方法是切换您的 @media 您的规则以正确的顺序排列：

The easiest fix is to switch your @media blocks around so your rules cascade in the correct order:

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

这篇关于CSS特性，媒体查询和最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！