Dies ist eine alte Version des Dokuments!
LU05c - Responsive Webdesign - Medienmerkmale
Die Ausgabegeräte verfügen über verschiedene Merkmale. Das häufigste Merkmal ist die Minimal- und Maximalbreite der Anzeigefläche. Nachfolgend sind die wichtigsten Medienmerkmale tabellarisch aufgeführt, welche mit den Media Queries abgefragt werden können.
Präfixe min- und max-
Anstatt eine Media Query zu verwenden, bei der z.B. die exakte Breite mit width abgefragt wird, sollten min-width oder max-width bevorzugt werden. Diese reagieren bereits, wenn die Anzeigebreite mindestens oder höchstens dem übergebenen Wert entspricht.
Ferner finden Sie hier eine Übersicht über alle Medienmerkmale.
Übersicht Medienmerkmale
| Medienmerkmal | Bedeutung |
|---|---|
width, min-width, max-width | Breite der Anzeigefläche (Viewport) des Webbrowsers. Mögliche Werte sind positive Längenangaben. Beispiel: (min-width: 480px) |
height, min-height, max-height | Höhe der Anzeigefläche (Viewport) des Webbrowsers. Mögliche Werte sind positive Längenangaben. Beispiel: (max-height: 720px) |
device-width, min-device-width, max-device-width | Breite des Geräts. Mögliche Werte sind positive Längenangaben. Auch wenn das Gerät diese Abmessung besitzt, können Sie sich nicht darauf verlassen, dass dieser verfügbare Bereich auch verwendet werden kann. Beispiel: (device-min-width: 480px) |
device-height, min-device-height, max-device-height | Höhe des Geräts. Mögliche Werte sind positive Längenangaben. Auch wenn das Gerät diese Abmessung besitzt, können Sie sich nicht darauf verlassen, dass dieser verfügbare Bereich auch verwendet werden kann. Beispiel: (device-max-width: 480px) |