Responsive Design bedeutet 2025 mehr als "sieht auf dem Handy okay aus". Mit Container Queries, dynamischen Viewport-Units und Fluid Typography haben wir Tools, die vor 3 Jahren undenkbar waren. Trotzdem bauen die meisten Agenturen immer noch mit starren Breakpoints und Media Queries. Zeit für ein Update.
Das Problem mit klassischen Breakpoints
Das iPhone 15 hat 393px Breite. Das Samsung Galaxy S24 hat 360px. Das iPad Mini hat 744px. Ein typisches Android-Tablet hat 800px. Zwischen all diesen Geräten gibt es hunderte Zwischengrößen. Wer mit 3 festen Breakpoints (mobile, tablet, desktop) arbeitet, hat für die Hälfte aller Geräte ein suboptimales Layout. Modernes Responsive Design braucht keine Breakpoints — es braucht fluide Systeme.
Fluid Typography: Schrift, die sich anpasst
Statt font-size: 16px auf Mobile und font-size: 20px auf Desktop mit einem Breakpoint dazwischen, nutzen wir CSS clamp() für stufenlose Skalierung. Die Schriftgröße passt sich linear zwischen einem Minimum und Maximum an — ohne Sprünge, ohne Breakpoints.
/* Fluid Typography — skaliert von 16px (320px) bis 20px (1200px) */
h1 {
font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
p {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
line-height: clamp(1.5, 1.4 + 0.3vw, 1.8);
}Container Queries: Der Game-Changer
Container Queries sind die größte CSS-Innovation seit Flexbox. Statt auf die Viewport-Breite zu reagieren (Media Queries), reagieren Elemente auf die Breite ihres Containers. Das bedeutet: Eine Karten-Komponente kann in einer schmalen Sidebar anders aussehen als im Hauptbereich — automatisch, ohne JavaScript, ohne Wrapper-Hacks.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
gap: 1.5rem;
}
}
@container (min-width: 600px) {
.card {
font-size: 1.125rem;
}
}Neue Viewport-Units: svh, dvh, lvh
Die klassische vh-Unit hat ein bekanntes Problem auf Mobile: Die Adressleiste des Browsers ändert die Viewport-Höhe beim Scrollen. 100vh ist plötzlich zu groß. Die neuen Units lösen das: svh (small viewport height) — Viewport mit sichtbarer Adressleiste, dvh (dynamic viewport height) — passt sich in Echtzeit an, lvh (large viewport height) — Viewport ohne Adressleiste. Für Hero-Sections empfehlen wir: height: 100dvh als Standard.
Unsere Responsive-Design-Checkliste 2025
- 01Fluid Typography mit clamp() statt fester Schriftgrößen pro Breakpoint
- 02Container Queries für wiederverwendbare Komponenten (Cards, Widgets, Sidebars)
- 03Neue Viewport-Units (dvh/svh) für Full-Screen-Sections auf Mobile
- 04CSS Grid mit auto-fit/auto-fill für dynamische Spaltenanzahl
- 05Touch-Targets mindestens 44x44px — Apple und Google Guidelines
- 06Kein horizontales Scrollen — auf keinem Gerät, niemals
- 07Bilder mit srcset und sizes für optimale Auflösung pro Gerät
- 08Interaktive Elemente mit :hover UND :active/:focus-visible für Touch und Keyboard
Responsive Design ist 2025 kein Feature mehr — es ist die Architektur. Wer immer noch mit starren Breakpoints und pixel-perfekten Layouts arbeitet, baut für die Vergangenheit. Fluid, container-aware, performance-first — das ist die Zukunft.
