"Vererbung" bei Anwendung von Media Queries

[Gunnar Bittersmann]

@@oxo888oxo:

nuqneH

@media only screen and (min-width: 50em) and (max-width: 90em) {
@media only screen and (min-width: 90.25em) {

Und was passiert zwischen 90em und 90.25em?

Das ist richtig dumm spezifiziert worden!!! (Und wer sagt, drei Anführungszeichen seien zu viel: Hier sind drei eher noch zu wenig. Und wer sagt, sie seien ein Zeichen eines kranken Geistes. Ja! Aber nicht meines, sondern des der Ersteller der Spec.)

min-width und max-width hätten entweder so: min-width ≤ current-width < max-width
oder so: min-width < current-width ≤ max-width
wirken sollen, nicht aber so: min-width ≤ current-width ≤ max-width.

Wenn man es aus "@media only screen and (min-width: 90.25em)" herausnimmt, greift dort dann ja wieder font-size: 2em;.
Ist das soweit richtig von mir überlegt?

Ja, richtig.

Falls ja, wäre dann nicht ein folgender Aufbau sinnvoller
…
Und wenn dann "@media only screen and (min-width: 90.25em)" zur Geltung kommt, dort aber keine Angaben hür h1 drinstehen, wird doch weiterhin "font-size: 4em; angewendet.

Ja, sinnvoller.

Mann fnängt doch ganz oben bei den ersten Angaben in der CSS-Datei immer mit dem an, was erstmal für alle Viewports gelten soll.
Und dann geht man (bei mobile first) zum nächstgrößeren Viewport-Breakpoint und ändert dort alles, was eben anders dargestellt werden soll.
Und beim darauffolgenden Viewport-Breakpoint macht man wieder NUR die Änderungen, die gelten sollen aus Sicht vom zweiten Viewport-Breakpoint.
Ist das richtig überlegt?

Ja, richtig.

Oder sollte man einfach 3 komplett getrenne Media Querie Bereiche machen?

Eher nicht. Zumal das bei Breakpoints in em schwierig ist, s.o.

Qapla'