CSS-Breakpoints
Media Queries haben gezeigt, wann @media greift. Responsive Bilder haben gezeigt, wie Bilder in die Slots passen, die diese Queries schaffen. Breakpoints sind der Plan: eine kurze Liste von Breiten, an denen sich die Layout-Strategie ändert — Spalten, Navigation, Abstände — einmal benannt und überall wiederverwendet, damit die ganze Site im Gleichschritt mitzieht.
Werkzeugkiste Breakpoints
📊 Breakpoints auf einen Blick
| Baustein | Alltagsaufgabe |
|---|---|
| Breakpoint | Geplante Breite, an der sich Layout-Regeln ändern |
| Inhaltsgetriebene Wahl | Breiten, wo das Design eng oder leer wirkt — keine Phone-SKUs |
Benannte Stufen (sm, md, lg…) |
Derselbe Token überall; einfachere Audits und Teamarbeit |
| Mobile-first-Leiter | Basis = schmal; min-width-Stufen fügen Verbesserungen hinzu |
| Fluid zwischen Stufen | %, rem, Flex/Grid flexen, bevor eine neue Query kommt |
| Dokumentierter Satz | Eine kurze Liste in Kommentaren oder Tokens — nicht zwanzig Einmal-Werte |
Ein Breakpoint ist nicht „das iPhone“. Er ist „wenn die Sidebar nicht mehr neben den Artikel passt“ oder „wenn die Nav zur Zeile werden kann“. Inhalt messen, dann eine gemeinsame Stufe schreiben.
Inhalt zuerst — kein Gerätekatalog
Browserfenster verkleinern, bis etwas bricht: Zeilen zu lang, Karten gequetscht, Hamburger obwohl Platz da ist. Diese Breite in rem (oder em) notieren. Das schlägt eine Marketing-Tabelle mit Phone-Pixeln.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
Pixelgenaue Gerätelisten altern schnell — jedes Jahr neue Phones. Wenige inhaltsgetriebene Stufen halten länger und lassen Stylesheets lesbar.
Stufen benennen — dieselben Breiten wiederverwenden
Für eine typische Site reichen zwei bis vier Stufen. Kurze Namen in Kommentaren (oder CSS custom properties mit den Breiten). Jede Komponente, die „das breite Layout“ startet, soll dieselbe Zahl nutzen — nicht 720px im Header und 768px im Grid.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Klassisches @media kann custom properties nicht überall als Query-Bedingung lesen, wie man es sich wünscht — behandeln Sie :root-Tokens daher als Dokumentation und Helfer für JS/Tooling, und halten Sie passende Literale konsistent. Entscheidend ist die Gewohnheit: eine gemeinsame Leiter, keine Zufallsbreiten pro Datei.
Mobile-first-Leiter
Schmale Defaults ohne Queries schreiben. Jede min-width-Stufe fügt Spalten, größere Schrift oder horizontale Nav hinzu. Nicht die ganze Seite bei jeder Stufe neu schreiben — eine klare Schicht ändern.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Desktop-first straffen (wenn Sie breit starten)
Liefert das Projekt schon ein breites Layout, können max-width-Queries Spalten auf kleineren Viewports einklappen. Konsistent bleiben: nicht willkürlich min-width und max-width für dieselbe Komponente mischen.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
Pro Projekt eine Richtung bevorzugen. Media Queries haben min-width vs. max-width-Syntax behandelt — hier gilt Strategie: gemeinsame Stufen, dieselbe Philosophie überall.
Eine Stufe, viele Komponenten
Wenn --bp-lg (oder 64rem) greift, Nav, Grid und Abstände gemeinsam anpassen, wenn sie zum selben Layout-Kapitel gehören. Verstreute „fast gleiche“ Breiten erzeugen Bugs, wo der Header vor dem Haupt-Grid umspringt.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
Erst fluid — dann Queries
Zwischen Breakpoints sollten Flex, Grid, % und rem kleine Breitenänderungen schon auffangen. Eine neue Query nur, wenn eine strukturelle Änderung nötig ist (Spaltenanzahl, anderes Nav-Muster). Mehr Queries sind nicht professioneller.
Selbst ausprobieren
- Übungsseite verkleinern und zwei Breiten notieren, an denen das Layout wirklich umschalten muss.
- Diese Breiten in
remumrechnen und benennen (md,lg). - Dieselben zwei
min-width-Werte auf Karten-Grid und Nav anwenden. - Im CSS nach anderen
min-width/max-width-Zahlen suchen — Near-Duplikate zusammenführen. - Eine unnötige Query entfernen, indem Sie die fluide Basis verbessern (gap,
minmax, wrapping).
Typische Fehler
- Katalog jeder Phone-Breite statt Content-Schmerzpunkte
- Zwölf überlappende Queries mit leicht verschiedenen Pixelwerten
- Header bricht bei
768px, Main bei800px, Footer bei720px - Fluid-CSS überspringen und jedes Ruckeln mit neuem
@medialösen @media-Klammern odersrcsethier nochmal lehren statt die Leiter zu planen
Kurzfassung
- Breakpoints sind geplante Layout-Stufen — kurzen Satz benennen und wiederverwenden
- Breiten aus Content-Stress wählen, nicht aus Geräte-Marketing-Tabellen
- Mobile-first-
min-width-Leiter bevorzugen; eine Richtung pro Projekt - Fluid zwischen Stufen bleiben; nur bei strukturellen Änderungen queryen
- Damit schließt das Responsive-Modul — als Nächstes: Box Shadow in Effects & Motion
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt