kaskadieren CSS-Spezifität mit Min-Width-Medienabfragen

Bei der Entwerfen einer Website sind es üblich, reaktionsschnelle Webdesignprinzipien, einschließlich des mobilen Ansatzes zu verwenden. Dies erfordert die Verwendung von Min-Breiten-Medien-Abfragen, um Geräte bestimmter Bildschirmgrößen zu zielen. Es kann jedoch verwirrend sein, wenn die CSS-Werte für höhere Bildschirmauflösungen überschreiben, da die niedrigere Min-Breite Vorrang zu haben scheint. In dem angegebenen Beispiel:

@media nur Bildschirm und (min-width: 600px) { H2 {Schriftgröße: 2.2EM; } } @media nur Bildschirm und (Min-Width: 320px) { H2 {Schrift: Normal 1.7EM/2.1EM Helvetica, sans-serif; } }

@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; }
}

@media nur Bildschirm und (min-width: 320px) { H2 {Schrift: Normal 1.7EM/2.1EM Helvetica, sans-serif; } } @media nur Bildschirm und (Min-Width: 600px) { H2 {Schriftgröße: 2.2EM; } }

Dies stellt sicher, dass die größere Schriftgröße angewendet wird, wenn die Bildschirmbreite mindestens 600px beträgt. Dadurch erhalten Sie die kaskadierende Spezifität, die Sie erwarten, wobei die höhere Minute Vorrang hat.