Wie kann ich Medienabfragen mit minimaler Breite korrekt kaskadieren lassen?

Kaskadierende CSS-Spezifität mit Medienabfragen mit minimaler Breite

Beim Entwerfen einer Website ist es üblich, responsive Webdesign-Prinzipien zu verwenden, einschließlich der Mobile-First-Ansatz. Dies erfordert die Verwendung von Medienabfragen mit minimaler Breite, um Geräte mit bestimmten Bildschirmgrößen anzusprechen. Allerdings kann es beim Überschreiben von CSS-Werten für höhere Bildschirmauflösungen verwirrend sein, da die niedrigere Mindestbreite Vorrang zu haben scheint.

Das liegt daran, dass Medienabfragen in der Reihenfolge von der geringsten Einschränkung zur höchsten Einschränkung ausgewertet werden. Im bereitgestellten Beispiel:

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

Beide Medienabfragen sind wahr, wenn die Bildschirmbreite 600 Pixel oder mehr beträgt. Die zweite Regel tritt jedoch später in der Kaskade auf, hat also Vorrang und die kleinere Schriftgröße von 1,7em wird angewendet.

Auflösung

Um Deklarationen in höheren Positionen effektiv zu überschreiben Auflösungen mithilfe von Mindestbreiten, ohne auf stärkere Selektoren oder maximale Breite zurückgreifen zu müssen, können Sie die Reihenfolge Ihrer Medienabfragen ändern:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

Dadurch wird sichergestellt, dass die größere Schriftgröße angewendet wird, wenn die Bildschirmbreite mindestens beträgt 600px. Dadurch erhalten Sie die erwartete kaskadierende Spezifität, wobei die höhere Mindestbreite Vorrang hat.

Das obige ist der detaillierte Inhalt vonWie kann ich Medienabfragen mit minimaler Breite korrekt kaskadieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!