Estou redesenhando meu blog com o design responsivo da web em mente, e o método "mobile first" - Resumindo, estou tentando usar min-width para evitar qualquer tipo de replicação ou css .. nenhuma exibição: nenhuma é etc.

Meu problema é que, quando eu preciso sobrescrever um valor de CSS, a menor largura mínima tem precedência. Exemplo:

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

Eu esperaria quando eu estou em resoluções de 600px e acima para obter um 2.2em h2, mas em vez disso eu obter 1.7em .. Nas minhas ferramentas de Dev vejo que a declaração 2.2em está lá, mas o outro tem precedência. Não faz sentido!

Eu poderia continuar usando min-widths e efetivamente substituir declarações em resoluções mais altas sem usar seletores mais fortes ou max-width ..?