Przeprojektowuję mojego bloga z myślą o responsywnym projektowaniu stron internetowych i metodzie „mobile first” - w skrócie próbuję użyć min-width, aby uniknąć wszelkiego rodzaju replikacji lub css .. brak wyświetlania: none's etc ..

Moim problemem jest to, że gdy muszę nadpisać wartość CSS, pierwszeństwo ma niższa minimalna szerokość. Przykład:

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

Spodziewam się, że w rozdzielczości 600px i wyższej otrzymam 2.2em h2, ale zamiast tego otrzymam 1.7em .. W moich narzędziach Dev widzę, że deklaracja 2.2em jest tam, ale druga ma pierwszeństwo. . To nie ma sensu!

Czy mogę nadal używać min-width i skutecznie nadpisywać deklaracje w wyższych rozdzielczościach bez użycia silniejszych selektorów lub maksymalnej szerokości ..?