Responsive Design - Größenangaben

[Gunnar Bittersmann]

@@Gunnar W.

wenn ich also zwei Angaben mache der Art:

@media only screen and (min-width: 60em)

und

@media only screen and (min-width: 40em)

ist dann die Reihenfolge der @media-Angabe entscheidend? Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.

Die letzte Angabe gewinnt (bei gleicher Spezifiät der Selektoren).

Bei von-klein-nach-groß (min-width, mobile first) sollte 40em im Stylesheet vor 60em stehen.

Oder müsste die kleinere der Angaben so lauten:

@media only screen and (min-width: 40em) and (max-width: 59em)

Kommt drauf an: overlapping vs. stacked

Was aber dann bei einer Viewportgröße von 59.1em?

Keiner der media queries greift.

Hat sich meine Vorhersage eigentlich bewahrheitet? Muss ich glatt mal testen …

LLAP 🖖