CSS specifics, media queries and minimum widths

Question

I am redesigning my blog with responsive web design and the mobile first approach. In short, I'm trying to use a minimum width to avoid any kind of replication or css. no display: none etc ...

My problem is that when I need to rewrite the CSS value, the lower minimum 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 would expect it to be at 600 pixels or higher to get 2.2em h2, but instead I get 1.7em. In my Dev tools, I see that there is a 2.2em declaration, but another has an advantage. It does not make sense!

Can I use min-width and effectively overwrite higher resolution ads without using stronger selectors or max-width.?

Answer 1

I would expect it to be at 600 pixels or higher to get 2.2em h2, but instead I get 1.7em. In my Dev tools, I see that there is a 2.2em declaration, but another has an advantage. It does not make sense!

It makes sense. If the environment matches min-width: 600px , then it should also execute min-width: 320px ; in other words, everything that has a width of at least 600 pixels also has a width of at least 320 pixels, since 600 is greater than 320.

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

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

This explains why 2.2em appears in your developer tools, but does not have an obvious effect.

The simplest fix is ​​to toggle @media blocks so that your rules are cascaded 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; } }