Wir können uns moderne Webentwicklung ohne adaptive/responsive Designs nicht vorstellen. Es ermöglicht den Nutzern, Webquellen auf jedem Gerät gleichermaßen zu nutzen: einem Smartphone, einem Tablet, einem Desktop oder einem Fernseher.

Wie funktioniert es?

1. Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße aussehen wird;
2. Setzen Sie die notwendigen Anweisungen in den Code;
3. Der Browser verfolgt die Änderungen des Ansichtsfensters;
4. Der Browser wendet die Regeln an, die das Entwicklungsteam in Form von Code festgelegt hat.

Media-Queries

Media-Query ist das, was adaptive/responsive Designs möglich macht. Mit Hilfe dieser Abfragen können Entwickler die Stile eines Elements je nach Bildschirmgröße festlegen.

Hinweis

Wir können Media-Query als Anweisungen wahrnehmen: "Wenn der Bildschirm eines Benutzers ein Desktop ist, wenden Sie solche Stile auf das Element an. Wenn der Bildschirm eines Benutzers ein Smartphone ist, wenden Sie 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 Medienregel für alle Geräte;
   • print - die Medienregel gilt für Geräte, die gedruckte Dokumente erzeugen, wie Drucker;
   • screen - die Medienregel gilt für alle Geräte mit physischem Bildschirm.
2. <media_feature> - deklariert Geräteeigenschaften. Häufigste Verwendung:
   • min-width: - die minimale Breite des Ansichtsfensters;
   • max-width: - die maximale Breite des Ansichtsfensters.
3. <operator> - Medien-Typ und Medien-Feature werden durch den optionalen logischen Operator getrennt. Seine Werte können sein: and oder ,.

Hinweis

In den folgenden Kapiteln werden wir die Verwendung von Media-Queries in der Praxis betrachten.