CSS specificity, Media Queries and min-width

Question

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..

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

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..?

Diopside

To clarify on BoltClock's answer below, this is what the browser is thinking: It hits the first media query, 'Oh, I have a min-width of 600! Let's set my font size to 2.2em!'. Then it continues onto the next media query, 'Oh, I have a min-width of 320! Let's set my font to this now!'. – Urson

The unicorn's answer is correct, but maybe you should think in terms of max-width instead of min-width. If you want a smaller H2 size on smaller screens, you can write font-size: 2.2em without media query and then font-size:1.7em in a query for max-width:599px. – Quadroon

max-width is not really a good practice.. hard to explain but when you use max-width you end up re-writing duplicating CSS .. check html5rocks.com/en/mobile/responsivedesign – Diopside

Answer 1

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!

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

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

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

Overlive

CSS specificity takes also into account order of appearance... sometimes you just miss the most obvious things when you spend 12h in front of the pc! Thanks Unicorn:) – Diopside

I don't get it. How come if a media of at least 600px wide is also at least 320px wide? is that really mean it could be 320px wide(e.g., by resizing the browser window to be smaller)? – Stinkwood

@John Wang: 600px is more than 320px. So if something is 600px or wider, it's also 320px or wider. That's the meaning of "at least". – Overlive

@Overlive Thank you sir, got it. After playing with some sample code, I realized min-width could be read as "greater-equal than". That makes it more straightforward for understanding: "give me font-size at 2.2em if the screen width is greater-equal than 600px" – Stinkwood

min-width (outside of this question context) could have been read as "minimum width that this rule can apply to" which is inverse of what is explained here. For example min-width: 600px could be read as "the browser's width must be no smaller than 600px" in order for this rule to apply. That's why this sentence: If the media fulfills min-width: 600px, then it should also fulfill min-width: 320px makes no sense on first read-through if you are not a day-to-day CSS developer who knows the actual semantics. – Pug