media-queries

[Rolf B]

Hallo Lydia,

@media screen (max-width: 30em){}

gilt die schmale Definition solange width < 30em.

Eben nicht. max-width prüft auf kleiner oder gleich. Je nach Wert für 1em ist der Unterschied zwischen <30em und <=30em 0 oder 1 Pixel breit. Und das lässt Dir beim Ziehen der Fenstergröße ggf. das Layout springen, weil unerwartet die Regeln für <=30em und >=30em gleichzeitig gelten. Oder, wenn die Fenstergröße gerade so gezogen wurde, dass die Breite genau 30em ist, ist dein Layout geschrottet, wenn Du diesen Fall nicht berücksichtigt und getestet hast.

Deswegen hast Du mit deinem Vorschlag von 13:17 Uhr vier Fälle:

< 30em - Regelsatz 1
= 30em - Regelsatz 1 und 2
> 30em und < 40em - Regelsatz 2
>= 40em - Regelsatz 2 und 3

Ohne die max-width:30em Klausel für den "Normalfall" hast Du

< 30em - Regelsatz 1
>= 30em und < 40em, Regelsatz 1 und 2
>= 40em, Regelsatz 1, 2 und 3

Das ist nach meiner Erfahrung besser zu handhaben.

Rolf