Responsive Web Design

Die Grundidee von Responsive Web Design ist es, dass eine Webseite auf verschiedenen Geräten und Bildschirmgrößen gut lesbar und bedienbar ist.

Durch die verschiedenen Größen von Geräten, wie Smartphones, Tablets und Desktops, ist es nicht möglich, eine Webseite für alle Geräte zu erstellen.

Daher gibt es Media Queries, die es ermöglichen, verschiedene Layouts für verschiedene Bildschirmgrößen zu definieren.

Es ist kein JavaScript notwendig und kann mit HTML und CSS umgesetzt werden.

Für die richtige Umsetzung von Responsive Web Design ist es wichtig, folgende Regeln zu beachten:

• Keine festen Werte für Breite und Höhe verwenden
• Auf standardmäßige Größen zurückgreifen
• Verwendung von Media Queries

Viewport

Der Viewport ist der sichtbare Bereich des Browsers. Durch die Angabe des Viewports kann der Browser auf die richtige Bildschirmgröße skalieren.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: Die Breite des Viewports wird auf die Breite des Geräts gesetzt.
• initial-scale=1.0: Die Seite wird mit einem Maßstab von 1:1 (100%) angezeigt.

Media Queries

Media Queries sind Bedingungen, die erfüllt sein müssen, damit ein bestimmtes Layout angewendet wird. Gesetzt werden Queries durch @media (condition) { ... }.

Wenn die Bildschirmbreite kleiner als 600px ist, wird der Body rot.

@media (max-width: 600px) {
  body {
    background-color: red;
  }
}

Syntax

@media not|only mediatype and (condition and|or|not condition) { ... }

• mediatype:
  • all (Standard)
  • print Druckausgabe
  • screen Bildschirm
  • speech Sprachausgabe
• condition: (Media Features)
  • width Breite des Viewports
  • min-width Mindestbreite des Viewports
  • max-width Maximale Breite des Viewports
  • height Höhe des Viewports
  • min-height Mindesthöhe des Viewports
  • max-height Maximale Höhe des Viewports
  • orientation Ausrichtung des Viewports
    • portrait Hochformat
    • landscape Querformat
  • aspect-ratio Verhältnis von Breite zu Höhe
    • min-aspect-ratio Mindestverhältnis von Breite zu Höhe
    • max-aspect-ratio Maximales Verhältnis von Breite zu Höhe
  • color Farbtiefe des Viewports
    • min-color Mindestfarbtiefe des Viewports
    • max-color Maximale Farbtiefe des Viewports
  • hover Prüft ob Hover möglich ist
    • hover Hover möglich
    • none Hover nicht möglich
    • pointer Prüft ob ein Zeiger möglich ist

Conditions lassen sich mit and, or (,) und not verknüpfen.

@media (max-width: 600px) and (orientation: portrait) {
  body {
    background-color: red;
  }
}