Die Kaskade macht CSS besonders und leistungsstark. Überlappen Sie sich jedoch bei Medienanfragenkönnen problematisch erscheinen.

Betrachten Sie das folgende CSS (Fortsetzung)Regeln für die Überlappung von CSS-Medienabfragen):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

Also, wenn der Bildschirm genau 45em breit ist, die Überlappung bei 45emwird behandelt gemäß der Standard-CSS-Kaskade:

Allesmax-width: 45em Definitionen werden zuerst angewendet,und allesmin-width: 45em wird danach angewendet.

Betrachten Sie diese beiden Bedingungen:

Aller Text würde normalerweise seinblack, aberFrage A ist einzigartig und hatcolor: red.Schon seitAbfrage B ist für größere Ansichtsfenster, der Text hat das CSSfont-size: larger.

Daher würden wir bei einer Breite von genau 45em bekommengroßer und roter Text. Was wäre die beste Lösung, um dies zu vermeiden?

Ich sehe zwei Möglichkeiten:

Deklarieren Sie den Text erneut, um zu habencolor: black imAbfrage B, aber dann verwalten Sie zwei Deklarationen, wenn Sie das ändern möchtencolor in der Zukunft. (Natürlich kein Problem mit dieser einzelnen Codezeile, aber stellen Sie sich vor, es gibt viele andere Deklarationen und Selektoren.)

Vermeiden Sie Überlappungen, indem Sie Pixelwerte wie verwendenmax-width: 799px undmin-width: 800px, aber dann benutzt du Pixel - ich schätze sie könnten 49.9375em und 50em sein. Was aber, wenn der Standardwert nicht mehr 16em ist und etwas gerundet wird? Und warenimmer noch nicht sicher was passiert bei dieser Lücke. (Ein Schwarzes Loch, das das Raum-Zeit-Kontinuum durchbricht?)

Beide haben ihre Nachteile ... irgendwelche anderen Ideen?