Wie wirkt sich die Reihenfolge der Medienabfragen auf CSS-Stile aus?

Warum beeinflusst die Reihenfolge der Medienabfragen das CSS-Verhalten?

Beim Einsatz von CSS-Medienabfragen zur Verbesserung der Reaktionsfähigkeit Ihrer Websites ist dies von entscheidender Bedeutung Beachten Sie, dass die Reihenfolge dieser Abfragen erhebliche Auswirkungen auf ihre Anwendung hat. Trotz der Annahme, dass die Reihenfolge keinen Einfluss auf das Ergebnis haben sollte, deuten empirische Beobachtungen auf etwas anderes hin.

Cascading Style Sheets (CSS) verstehen

Um die Gründe dafür genauer zu untersuchen Verhalten müssen wir zunächst die Natur von CSS verstehen. Sein Name leitet sich von seinem grundlegenden Merkmal ab: der Kaskadierung. Dies impliziert, dass auf Elemente angewendete CSS-Regeln auf der Grundlage ihrer Erscheinungsreihenfolge wirken. Daher gilt: Je später eine Regel angegeben wird, desto maßgeblicher wird sie.

Beispiel: Randänderung für Klasse „zwei“

Betrachten Sie das bereitgestellte CSS-Beispiel, in dem die Der Randwert für die Klasse „zwei“ wird basierend auf verschiedenen Medienabfragebedingungen angepasst. Wenn die Abfrage für 1024 x 600 am Ende des Codes erscheint, ignoriert der Browser sie und wendet stattdessen den am Anfang des CSS angegebenen Standardrand an (margin-top:2em). Dies liegt daran, dass die Standardregel eine höhere Priorität hat.

Neusequenzierung der Medienabfragen

Wenn wir die Medienabfragen jedoch wie folgt neu anordnen, wird das gewünschte Verhalten erzielt erreicht werden:

@media (max-width: 480px) { .body { font-size: 0.938em; } }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { body { font-size: 0.938em; } }
@media (min-width: 1200px) { .two { margin-top: 8em; } }
@media (min-height: 1020px) { .two { margin-top: 9em; } }
@media (min-height: 750px) and (max-height: 770px) { .two { margin-top: 7em; } }
@media (max-height: 600px) { .two { margin-top: 4em; } }

In dieser resequenzierten Version wurde die Abfrage für 1024x600 zur Auswertung verschoben nach den anderen Abfragen, um sicherzustellen, dass sie Vorrang hat und der gewünschte Rand korrekt angewendet wird.

Fazit

Die Reihenfolge der Medienabfragen ist in CSS aufgrund der kaskadierenden Natur wichtig von CSS. Wenn mehrere Regeln für dasselbe Element gelten, wird normalerweise die zuletzt angegebene Regel angewendet. Daher ist es wichtig, Medienabfragen gezielt anzuordnen, um die gewünschten visuellen Ergebnisse für Ihre Website bei verschiedenen Bildschirmgrößen zu erzielen.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Reihenfolge der Medienabfragen auf CSS-Stile aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!