Ich gestalte mein Blog unter Berücksichtigung des reaktionsschnellen Webdesigns und der "Mobile First" -Methode neu. Kurz gesagt, ich versuche, die minimale Breite zu verwenden, um jede Art von Replikation oder CSS zu vermeiden. Keine Anzeige: Keine.

Mein Problem ist, dass, wenn ich einen CSS-Wert überschreiben muss, die niedrigere min-width Vorrang hat. Beispiel:

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

Ich würde erwarten, dass ich bei Auflösungen von 600px und höher eine 2.2em h2 bekomme, aber stattdessen eine 1.7em .. In meinen Dev-Tools sehe ich, dass die 2.2em-Deklaration da ist, aber die andere hat Vorrang. Das ergibt keinen Sinn!

Könnte ich weiterhin Min-Widths verwenden und Deklarationen in höheren Auflösungen effektiv überschreiben, ohne stärkere Selektoren oder Max-Widths zu verwenden?