CSS Schnellstart – Media Query

Wir leben ja in Zeiten der mobilen Geräte. Jeder Mensch mit einem Smartphone kann innerhalb von Sekunden Internetseiten aufrufen.

Für die Webdesigner ist das eine Herausforderung. Denn deine Webseite muss für jeden Bildschirm passend angezeigt werden. Dafür gibt es etwas besonderes in CSS: Media Queries.

Grob gesagt sind Media Queries CSS-Regeln, die nur für eine bestimmte Bildschirm Breite genutzt werden sollen.

Wenn du deine Webseite für Mobilgeräte gestalten willst, dann solltest du die wichtigste Regel kennen:

Designe deine Webseite zuerst für die Mobilgeräte (Mobile First!).

Das heißt, deine CSS-Regeln sollten im Normalfall auf einem mobilen Gerät ideal gezeigt werden.

Dann erstellst du auf dieser Basis CSS-Regeln die nur für größere Bildschirme gelten.

Lass uns so einen MediaQuery für einen Bildschirm mal anschauen:

@media screen and (min-width: 480px) {
  .personen {
    border-style: solid;
    background-color: aqua;
  }
}

In der Übung darfst du mal die Größe deines Browsers verändern, dass die Breite unter 480 Pixel fällt. Dann wirst du sehen wie sich die Hintergrundfarbe ändert!