Warum überschreibt meine Medienabfrage mit der niedrigeren Mindestbreite meine höhere?

CSS-Spezifität, Medienabfragen und Mindestbreite: Vorrang verstehen

Bei der Neugestaltung von Websites mit einem reaktionsfähigen Ansatz sollten Sie die Spezifität beibehalten und das Verhalten von Medienabfragen mit Mindestbreite verstehen -Breite ist entscheidend. Beim Versuch, CSS-Werte zu überschreiben, tritt jedoch eine häufige Gefahr auf, da die niedrigere Einstellung für die Mindestbreite Vorrang haben kann.

Betrachten Sie das folgende 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; }
}

Bei Auflösungen von 600 Pixel und höher , wird erwartet, dass die Schriftgröße von

Element sollte 2,2em sein. Die Ausgabe zeigt jedoch stattdessen 1,7em. Obwohl die 2.2em-Deklaration in den Entwicklertools erscheint, wird sie durch die 1.7em-Einstellung in der unteren Mindestbreitenabfrage überschrieben.

Grundlagen bei Medienabfragen

Dieses Verhalten ist auf die Art und Weise zurückzuführen, wie Medienanfragen ausgewertet werden. Wenn mehrere Medienabfragen auf ein Element angewendet werden, hat die Regel, die in der Kaskadenreihenfolge zuletzt auftritt, Vorrang. Da in diesem Fall beide Medienabfragen für Auflösungen von 600 Pixel und höher als wahr ausgewertet werden, überschreibt die letztere Abfrage die erstere.

Problem lösen

Um dieses Problem zu beheben, Ordnen Sie die Medienabfrageblöcke neu an, sodass die Regeln in der beabsichtigten Reihenfolge kaskadieren:

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

Indem Sie die Abfrage mit der niedrigeren Mindestbreite zuerst platzieren, wird die Schriftgröße 2.2em jetzt bei Auflösungen von 600 Pixel und höher wirksam .

Fazit

Das Verständnis der CSS-Spezifität und der kaskadierenden Reihenfolge von Medienabfragen ist für ein effektives responsives Design von entscheidender Bedeutung. Indem Sie die Reihenfolge Ihrer Medienabfragen sorgfältig berücksichtigen, können Sie sicherstellen, dass sich Ihr Code wie beabsichtigt verhält und über verschiedene Bildschirmgrößen hinweg die gewünschte visuelle Ausgabe erzielt.

Das obige ist der detaillierte Inhalt vonWarum überschreibt meine Medienabfrage mit der niedrigeren Mindestbreite meine höhere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!