title: CSS specificity, Media Queries and min-width
body: <p>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..</p>
  
  <p>My problem is that when I do need to over-write a CSS value, the lower min-width takes precedence. Example:</p>
  
  <pre><code>@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; }
  }
  </code></pre>
  
  <p>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!</p>
  
  <p>Could I keep using min-widths and effectively overwrite declarations in higher resolutions without using stronger selectors or max-width..?</p>