Responsive Schriftgrößen und Abstände wurden lange über Media Queries gelöst: bei 768px eine andere Größe, bei 1200px wieder eine andere. Das funktioniert, ist aber aufwendig. Mit clamp() kannst du Größen definieren, die sich kontinuierlich an die Bildschirmbreite anpassen – zwischen einem Minimum und einem Maximum, ganz ohne einen einzigen Breakpoint.
Abschnitte: Die Syntax, Schriftgrößen mit clamp(), Abstände mit clamp(), Den mittleren Wert berechnen, min() und max() als Verwandte.
Die Syntax
clamp() nimmt genau drei Werte entgegen:
element {
eigenschaft: clamp(minimum, bevorzugt, maximum);
}- minimum – der kleinste erlaubte Wert. Darunter geht die Eigenschaft nie, egal wie klein der Bildschirm ist.
- bevorzugt – der Wert, den der Browser anstrebt. Meist eine
vw-Angabe, damit er sich mit der Viewport-Breite skaliert. - maximum – der größte erlaubte Wert. Darüber wächst die Eigenschaft nicht weiter.
Der Browser wählt immer den mittleren Wert – es sei denn, er liegt außerhalb der Grenzen. Dann greift das Minimum oder Maximum.
Schriftgrößen mit clamp()
Das klassische Anwendungsbeispiel: Eine Überschrift, die auf kleinen Bildschirmen kompakter und auf großen Bildschirmen größer erscheint – ohne Media Query:
h1 {
font-size: clamp(2.4rem, 4vw, 4.8rem);
/* Minimum: 24px | bevorzugt: 4% der Viewport-Breite | Maximum: 48px */
}
p {
font-size: clamp(1.6rem, 1.5vw + 0.5rem, 2rem);
/* Fließtext: sanft skalierend zwischen 16px und 20px */
}
Der bevorzugte Wert 4vw bedeutet: 4 % der Viewport-Breite. Bei einem 1200px breiten Bildschirm wären das 48px – genau das Maximum. Bei 600px Breite wären es 24px – genau das Minimum. Dazwischen skaliert der Wert flüssig.
Abstände mit clamp()
clamp() funktioniert mit jeder CSS-Eigenschaft, die numerische Werte akzeptiert – also auch mit padding, margin, gap oder width:
.section {
padding: clamp(2rem, 5vw, 6rem);
/* Außenabstand wächst mit dem Viewport – nie unter 20px, nie über 60px */
}
.grid {
gap: clamp(1.6rem, 3vw, 3.2rem);
/* Abstand zwischen Grid-Elementen skaliert sanft mit */
}
Damit entfällt das übliche Muster: Standard-Padding setzen, dann per Media Query für größere Bildschirme überschreiben. Ein einziger clamp()-Wert erledigt beides.
Den mittleren Wert berechnen
Der bevorzugte Wert muss nicht eine einfache vw-Angabe sein – du kannst Einheiten kombinieren. Das gibt dir eine lineare Skalierung, die du präzise auf zwei Breakpoints abstimmen kannst:
h2 {
/*
* Ziel: bei 400px → 20px, bei 1200px → 36px
*
* Steigung: (36 - 20) / (1200 - 400) = 16 / 800 = 0.02 → 2vw
* Versatz: 20px - 0.02 × 400px = 20 - 8 = 12px → 1.2rem
*/
font-size: clamp(2rem, 2vw + 1.2rem, 3.6rem);
}
Die Formel klingt aufwendig, lässt sich aber einmal herleiten und dann als Muster verwenden. Online-Rechner wie clamp.font-size.app nehmen dir die Arbeit ab – du gibst Mindest- und Maximalgröße plus die gewünschten Breakpoints ein und bekommst den fertigen clamp()-Wert.
min() und max() als Verwandte
clamp() hat zwei nützliche Geschwister, die du separat einsetzen kannst:
min(a, b)– nimmt den kleineren der beiden Werte. Praktisch wenn eine Breite nicht über einen bestimmten Wert hinauswachsen soll:width: min(100%, 60rem)max(a, b)– nimmt den größeren Wert. Nützlich um ein Minimum sicherzustellen:padding: max(2rem, 5vw)
.container {
width: min(100%, 120rem);
/* nie breiter als 1200px, aber auf kleinen Screens 100% */
}
.karte {
padding: max(1.6rem, 3vw);
/* mindestens 16px, wächst aber mit dem Viewport */
}
/* clamp() ist im Grunde ein max() innerhalb eines min(): */
/* clamp(min, val, max) ≡ max(min, min(val, max)) */
Alle drei Funktionen – clamp(), min() und max() – lassen sich auch verschachteln und mit calc() kombinieren. In der Praxis reicht für die meisten Fälle ein einfaches clamp() mit einem vw-basierten mittleren Wert vollkommen aus.