CSS clamp(), min() und max() – responsives Sizing ohne Media Queries

Das Problem mit Media Queries

Wer kennt es nicht: eine Handvoll Breakpoints, für jede Schriftgröße drei Überschreibungen, und am Ende sieht es auf einem 1400px-Display trotzdem komisch aus. Media Queries sind mächtig – aber für viele Sizing-Probleme sind sie schlicht das falsche Werkzeug. clamp(), min() und max() sind die elegantere Lösung.

min() und max() – die Basis

Bevor wir zu clamp() kommen, kurz die Grundlagen:

min() nimmt den kleinsten Wert aus einer Liste:

width: min(600px, 90%);

Bedeutet: die Breite ist maximal 600px – aber nie mehr als 90% des Elternelements. Kein Media Query nötig um ein Element auf kleinen Screens zu begrenzen.

max() nimmt den größten Wert:

font-size: max(16px, 1.2vw);

Bedeutet: die Schrift ist mindestens 16px – skaliert aber mit dem Viewport. Auf kleinen Screens greift die 16px-Grenze, auf großen wächst die Schrift mit.

clamp() – das Beste aus beiden Welten

clamp() kombiniert beides: ein Minimum, einen bevorzugten Wert und ein Maximum.

clamp(minimum, preferred, maximum)

Ein konkretes Beispiel für responsive Schriftgröße:

font-size: clamp(1rem, 2.5vw, 2rem);

Was passiert hier?

• Minimum: 1rem – nie kleiner als 16px
• Bevorzugt: 2.5vw – skaliert flüssig mit dem Viewport
• Maximum: 2rem – nie größer als 32px

Das Ergebnis: eine Schriftgröße die sich zwischen 320px und 1600px Viewport vollständig flüssig anpasst – ohne eine einzige Media Query.

Praktische Beispiele

Responsive Überschrift

h1 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
}

Container-Breite die nie zu schmal oder zu breit wird

.container {
    width: min(1200px, 90%);
    margin-inline: auto;
}

Responsive Padding das mit dem Screen skaliert

.section {
    padding-block: clamp(2rem, 8vw, 6rem);
}

Bild das nie zu groß wird, aber immer die volle Breite füllt

img {
    width: min(100%, 800px);
}

Wann welche Funktion?

Accessibility-Hinweis bei Schriftgrößen

Wer clamp() für font-size nutzt, sollte einen Punkt im Hinterkopf behalten: Ein hartes Maximum kann gegen WCAG 1.4.4 (Resize Text, AA) verstoßen, weil es Nutzern erschwert, Text auf 200% zu skalieren. Die robustere Variante verwendet einen Rechenausdruck als preferred value statt eines reinen Viewport-Werts:

/* Besser für Accessibility */
font-size: clamp(1rem, 1rem + 1vw, 2rem);

So bleibt die Schrift relativ zur Basis-Schriftgröße des Nutzers – Zoom funktioniert weiterhin korrekt. Das Ergebnis nach dem Zoom immer kurz testen.

Browser-Support

Alle drei Funktionen sind seit 2020 in allen modernen Browsern verfügbar – Chrome, Firefox, Safari, Edge. Kein Polyfill nötig, kein Fallback erforderlich.

Zusammengefasst

1. min(a, b) – nimmt den kleinsten Wert → setzt eine Obergrenze
2. max(a, b) – nimmt den größten Wert → setzt eine Untergrenze
3. clamp(min, preferred, max) – flüssige Skalierung mit Unter- und Obergrenze
4. Für responsive Schrift, Abstände und Containerbreiten sind diese drei Funktionen oft eleganter als Media Queries
5. Volle Browser-Unterstützung – heute einsetzbar