EMZETT.
Login

Emzett Wiki

Media Queries und Breakpoints: Layout an Bildschirme anpassen

Properties1
tagsglossar, css, frontend

2 Min. Lesezeit

Media Queries und Breakpoints: Layout an Bildschirme anpassen

Kurz: Mit Media Queries wendet CSS Regeln nur bei bestimmten Bedingungen an, etwa ab einer Bildschirmbreite; so passt sich eine Seite Handy, Tablet und Desktop an.

Genauer: Eine responsive Seite sieht auf jedem Gerät gut aus. Voraussetzung ist im HTML <meta name="viewport" content="width=device-width, initial-scale=1">, damit Mobilbrowser die echte Breite nutzen.

Im Detail

Syntax und Mobile-First

.karte { display: block; }            /* Standard: Handy */
 
@media (min-width: 768px) {
  .karte { display: flex; gap: 1rem; } /* ab Tablet */
}
@media (min-width: 1200px) {
  .karte { max-width: 1100px; }        /* ab Desktop */
}

Mobile-First: Zuerst das Layout für kleine Bildschirme schreiben, dann mit min-width für größere ergänzen. Das ist meist einfacher und lädt auf dem Handy weniger Überflüssiges.

Typische Breakpoints

Etwa 640 px (großes Handy), 768 px (Tablet), 1024 px (kleiner Laptop), 1280 px (Desktop). Richte Breakpoints nach dem Inhalt aus: Wo bricht das Layout? Dort setzt du einen. Nutze relative Einheiten (rem, %, vw) und clamp() für fließende Schriftgrößen: font-size: clamp(1rem, 2.5vw, 1.5rem);.

Weitere Abfragen

  • prefers-color-scheme: dark: Dunkelmodus des Systems.
  • prefers-reduced-motion: reduce: Animationen reduzieren (Barrierefreiheit).
  • orientation: landscape, print für den Druck.
  • hover: hover und pointer: coarse: Maus gegen Touch.
  • Container Queries (@container) reagieren auf die Größe des umgebenden Elements statt des Fensters, ideal für wiederverwendbare Komponenten.

Prüfen und Fallstricke

Teste mit den Geräte-Symbolen der Browser-Entwicklerwerkzeuge (F12) und auf echten Geräten. Vermeide feste Breiten in Pixeln, horizontales Scrollen und zu kleine Tippflächen (mindestens etwa 44 px). Bilder mit max-width: 100% und srcset anpassen. Flexbox und Grid lösen vieles auch ohne Media Queries (flex-wrap, repeat(auto-fit, minmax(...))).

Siehe auch: Responsive Design, Flexbox, Grid, WCAG und Farbkontrast