CSS INTENSIVSTATION

Media Queries

Media Queries ermöglichen es, CSS-Regeln abhängig von bestimmten Bedingungen wie der Bildschirmbreite, der Orientierung oder Nutzerpräferenzen anzuwenden. Sie bilden die Grundlage für Responsive Design – Layouts, die sich flexibel an unterschiedliche Situationen anpassen.

Der Viewport Meta-Tag

Der Viewport Meta-Tag steuert die Breite und Skalierung der Seite auf mobilen Geräten. Ohne ihn wird die Seite auf Smartphones verkleinert dargestellt.

Tiny Viewport

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

Media Types

Definiert für welches Medium die Styles gelten.

  • screen Nur für Bildschirme
  • print Nur für Druck
  • all Alle Medien (Standard, kann weggelassen werden)

Syntax

CSS wird aktiv wenn die Bedingung erfüllt ist.

@media (Bedingung) {
  body {
    background: blue;
  }
}

Viewport-basierte Queries

  • width / height Breite / Höhe des Viewports
  • min-width Mobile First
  • max-width Desktop First

min-width (Mobile First)

Mobile First ist die empfohlene Vorgehensweise. Dabei werden zuerst die Basis-Styles für kleine Screens entwickelt und danach schrittweise für grössere Screens erweitert.

See the Pen Media Queries by Intensivstation (@intensivstation) on CodePen.

Vorteil: Mobile First ist die empfohlene Methode. Du startest mit den Basis-Styles für kleine Screens und fügst für grössere Screens hinzu.

/* Basis: Mobile Styles */
body {background-color:#eee;}

@media (min-width: 768px){
  body { background-color: mistyrose; }
}
@media (min-width: 1024px){
  body { background-color: thistle;}
}
@media (min-width: 1280px){
  body { background-color: pink;}
}
@media (min-width: 1440px){
  body { background-color: skyblue;}
}

max-width (Desktop First)

Gilt bis zu einer bestimmten Breite abwärts.

/* Basis: Desktop Styles */
body { font-size: 20px;}

@media (max-width: 1024px) {
  body {font-size: 18px;}
}
@media (max-width: 768px) {
   body { font-size: 16px;}
}

Nachteil: Du musst für Mobile alles überschreiben. Mehr Code, mehr Komplexität.

Typische Breakpoints

Es gibt keine "offiziellen" Breakpoints, nur übliche Werte.

  • 320px Small Mobile (Basis)
  • 480px Large Mobile
  • 768px Tablet
  • 1024px Laptop / kleiner Desktop
  • 1280px Desktop
  • 1440px Wide Screen
  • 1600px+ Ultra Wide

Hinweis: Breakpoints orientieren sich am Layout – nicht an bestimmten Geräten. Sie werden dort gesetzt, wo das Design strukturell angepasst werden muss.

Weitere Layout-Features

  • orientation Hoch- oder Querformat
  • aspect-ratio Verhältnis von Breite zu Höhe
  • resolution Pixeldichte des Displays

orientation (Ausrichtung)

Erkennt ob das Gerät im Hoch- oder Querformat ist.

/* Hochformat */
@media (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

/* Querformat */
@media (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

aspect-ratio

Reagiert auf das Verhältnis von Breite zu Höhe des Viewports. Sinnvoll, wenn Layouts je nach Proportion statt nur nach Breite angepasst werden sollen.

/* Genau 16/9 */
@media (aspect-ratio: 16/9) { }

/* Breiter als 16/9 (Querformat, sehr breit) */
@media (min-aspect-ratio: 16/9) { }

/* Schmaler als 16/9 (Hochformat oder quadratisch) */
@media (max-aspect-ratio: 16/9) { }

resolution

Erkennt die Pixeldichte eines Displays (z.B. Retina). Wird selten im klassischen Layout genutzt, kann aber für hochauflösende Bilder oder spezielle Grafiken sinnvoll sein.

Die Angabe erfolgt meist in dpi oder dppx. In modernen Projekten wird für unterschiedliche Bildauflösungen jedoch häufig srcset im HTML verwendet.

Nutzerpräferenzen

  • prefers-color-scheme Hell- oder Dark-Mode
  • prefers-reduced-motion Reduzierte Animationen
  • prefers-contrast Erhöhter Kontrast

prefers-color-scheme

Erkennt ob der User Dark Mode aktiviert hat.

/* Light Mode (Standard) */
body {
  background: white;
  color: black;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

Modern: Nutze stattdessen die light-dark() Funktion für automatisches Switching!

body {
  background: light-dark(white, black);
  color: light-dark(black, white);
}

prefers-reduced-motion

Respektiert User-Einstellungen für reduzierte Animationen (Accessibility).

/* Standard: Animationen aktiv */
.box { transition: transform 0.3s;}

/* User will keine Animationen */
@media (prefers-reduced-motion: reduce) {
  .box { transition: none;}
}

prefers-contrast

Reagiert auf erhöhte Kontrasteinstellungen des Users. Kann genutzt werden, um Farben und Abstände für bessere Lesbarkeit anzupassen.

@media (prefers-contrast: more) {
body {
    color: black;
    background: white;
  }
}

Logische Operatoren

AND – Beide Bedingungen müssen erfüllt sein

/* Nur Tablets im Querformat */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .container {
    max-width: 900px;
  }
}

OR (Komma) – Eine Bedingung reicht

/* Entweder klein ODER Dark Mode */
@media (max-width: 600px), (prefers-color-scheme: dark) {
  .header {
    padding: 10px;
  }
}

Kurz gesagt

  • Breakpoints folgen dem Layout, nicht dem Gerät
  • Content bestimmt den Wechselpunkt
  • Grid reduziert zusätzliche Media Queries
  • Flexbox ermöglicht flexible Umbrüche
  • clamp() erlaubt flüssige Skalierung
  • Container Queries ersetzen starre Screen-Breakpoints
  • Weniger Breakpoints sind oft besser
  • Mobile First ist die empfohlene Strategie