Estoy rediseñando mi blog teniendo en cuenta el diseño web adaptable, y el método "móvil primero". En resumen, estoy tratando de usar min-width para evitar cualquier tipo de replicación o css ... no se muestra: ninguno, etc.

Mi problema es que cuando necesito sobreescribir un valor de CSS, el ancho mínimo inferior tiene prioridad. Ejemplo:

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

Yo esperaría que cuando esté en resoluciones de 600px y superiores obtengan un 2.2em h2, pero en lugar de eso obtengo 1.7em ... En mis herramientas de Dev veo que la declaración de 2.2em está ahí, pero la otra tiene prioridad. ¡No tiene sentido!

¿Puedo seguir usando los anchos mínimos y sobrescribir las declaraciones de manera efectiva en resoluciones más altas sin usar selectores más fuertes o ancho máximo?