Wenn das Layout sich ändert, müssen die neuen Layout-Angaben gemacht werden.

Media Queries | Breakpoints | Grid

Differenzen des Gleichen

Media Queries

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.

Beispiel

@media only screen and (max-width: 500px)

Dies immer nur dann, wenn das Design nicht mehr stimmt.

Drei Schemen von Webseiten-Verhältnissen in drei Viewport Grössen. Damit klar wird, das auf unterschiedlichen Grössen verschiedene Verhältnisse angewendet werden müssen.
© Webdesign Essentials

Legende

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%.

Links

W3 Schools Media Queries (Media Rules)

Media Queries - Die Möglichkeiten

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 gesamte Liste

Die ganze Liste an Features auf W3schools.com hier eine Auswahl zum Einstieg.

Vertiefe dich ins ganze Kapitel

Responsive Design