Moderne Webentwicklung ist ohne adaptive/responsive Designs nicht vorstellbar. Dadurch können Nutzer Webressourcen auf jedem Gerät gleichermaßen verwenden: Smartphone, Tablet, Desktop oder Fernseher.

Wie funktioniert das?

1. Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße dargestellt wird;
2. Die notwendigen Anweisungen werden im Code festgelegt;
3. Der Browser überwacht Änderungen des Viewports;
4. Der Browser wendet die vom Entwicklungsteam im Code festgelegten Regeln an.

Media-Queries

Media-Query ermöglicht adaptive/responsive Designs. Mithilfe dieser Abfragen können Entwickler die Stile jedes Elements abhängig von der Bildschirmgröße festlegen.

Hinweis

Media-Query kann als Anweisung verstanden werden: "Wenn der Bildschirm des Nutzers ein Desktop ist, wende solche Stile auf das Element an. Wenn der Bildschirm des Nutzers ein Smartphone ist, wende andere Stile auf das Element an. Und so weiter.".

Die grundlegende Syntax der Media-Query ist wie folgt:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> – deklariert den Gerätetyp. Mögliche Werte:
   • all – Standardwert. Wenn nichts angegeben ist, gilt die Media-Regel für alle Geräte;
   • print – die Media-Regel gilt für Geräte, die gedruckte Dokumente erzeugen, wie Drucker;
   • screen – die Media-Regel gilt für alle Geräte mit physischem Bildschirm.
2. <media_feature> – deklariert Geräteeigenschaften. Häufigste Verwendung:
   • min-width: – die minimale Breite des Viewports;
   • max-width: – die maximale Breite des Viewports.
3. <operator> – Media-Type und Media-Feature werden durch den optionalen logischen Operator getrennt. Mögliche Werte: and oder ,.

Hinweis

In den folgenden Kapiteln wird die praktische Anwendung von Media-Queries behandelt.