CSS für mobile Endgeräte (einige Basis-Fragen zu Media-Queries)

[Gunnar Bittersmann]

@@Axel Ernst

a: @media only screen and (width : 320px) greift nur bei einer Breite von genau 320px?

So isses. Der media query ist sinnfrei.

b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px

So isses.

Werden "only" und "not" noch unterstützt?

Bei not ist eher die Frage „schon“ angebracht.

Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width").

Ersteres solltest du verwenden, letzteres vergessen.

Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ?

Gar keine. Sondern orientation.

Ich will ein Gerät ansprechen das 320 x 480 hat.

Nei-en. Das wären media queries falsch verwendet. Denkfehler.

Media queries sollten sich nicht nach gerade(!!) gängigen Geräten richten, sondern nach dem dargestellten Inhalt. Und auch nicht in px angegeben werden, sondern in em.

Was ich bereits herausfinden konnte ist, dass das hier nicht geht: @media only screen and (min-width : 320px) and (max-width : 480px) @media only screen and (min-width : 380px) and (max-width : 460px) Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist)

Doch.

greift aber auch nicht.

Doch.

Der zweite greift von 380px bis 460px und überschreibt den ersten.

Der erste wirkt damit also von 320px bis 379px und von 461px bis 480px.

Wie kann ich etappenweise Media-Queries aufbauen?

Meist sinnvoll: overlapping, nicht stacking. also nicht min-width und max-width in einem media query.

Meinst sinnvoll: mobile first, also von klein nach groß.

Grundsätzliche Angaben ohne media query. Die wirken bei schmalen Viewports.

Wenn es der Inhalt erfordert, einen Breakpoint mit min-width setzen. Dafür dann die Regeln angeben, die zusätzlich gelten.

Wenn es der Inhalt erfordert, einen weiteren Breakpoint mit min-width setzen. Dafür dann die Regeln angeben, die zusätzlich gelten.

Wenn es der Inhalt erfordert …

LLAP 🖖