Media Queries | Breakpoints | Grid
Mittels Media Queries können wir einem Element (Class) verschiedene Zustände (Values und Features) pro Medium (Device, Screen, Print) zusprechen.
Je nach Design ändern sich die Verhältnisse pro Device. Mit den Media Queries definiert man CSS-Properties für die neuen Verhältnisse.
@media only screen and (max-width: 500px)
Gut zu sehen sind die relativen responsiven Grössen. Auch wenn die physische Grösse kleiner wird, muss z. T. die relative Grösse vergrössert werden. Wie hier von 30 % auf 50 % und danach auf 100%.
W3 Schools Media Queries (Media Rules)
Es gibt verschiedene Media-Types (Medien Typen) die angesprochen werden können. Standardmässig werden all angesprochen, aber man kann zwischen print, screen und speech als «Media Type Values» unterscheiden.
Dazu kommen die Features zu den jeweiligen Values. Diese spezifizieren ein Medium (Media Type) noch genauer. Also z. B. die Breite eines Device oder die Orientierung (Portrait, Landscape) oder das Seitenverhältnis, die Bildschirmauflösung etc.
Im CSS können beliebig viele Media Queries definiert werden.
Die ganze Liste an Features auf W3schools.com hier eine Auswahl zum Einstieg.
Möchtest du Google Analytics mit anonymisierter IP-Adresse zulassen?
