clamp()-Generator
Fluide font-size mit CSS clamp() – lege Viewport-Grenzen und den Schriftgrößenbereich fest und erhalte sofort das Ergebnis
Parameter
Generiertes CSS
SCSS-Funktion
Parameter in px, gibt clamp in rem + vw zurück
Aufruf mit aktuellen Werten
So funktioniert der clamp()-Generator
Erzeuge fluide CSS-clamp()-Werte für responsive Typografie und Abstände. Lege Viewport-Grenzen und Größenbereich fest und erhalte sofort das Ergebnis.
Fluide Typografie
Erzeuge font-size-Werte, die mit der Viewport-Breite fließend zwischen einem Minimum und einem Maximum skalieren. Keine Breakpoints, keine Media Queries – nur ein einziger CSS-clamp()-Wert.
Viewport-Grenzen
Lege den Viewport-Bereich fest, in dem skaliert wird. Unterhalb des Minimums bleibt die Schrift bei ihrer kleinsten Größe, oberhalb des Maximums bei ihrer größten. Dazwischen skaliert sie linear.
Präzise Kontrolle
Gib exakte Werte in Pixel oder rem für die minimale und maximale Schriftgröße ein. Das Tool berechnet den bevorzugten Wert mit einer linearen Gleichung, die die Viewport-Breite auf die Schriftgröße abbildet.
Kopieren & verwenden
Kopiere den erzeugten clamp()-Wert als CSS oder SCSS. Das Ergebnis ist eine einzige Zeile, die du in jede Eigenschaft wie font-size, padding, margin oder gap einfügen kannst.
Häufig gestellte Fragen
clamp(min, preferred, max) ist eine CSS-Funktion, die einen Wert zwischen einem Minimum und einem Maximum begrenzt. Der bevorzugte Wert – meist relativ zum Viewport – skaliert innerhalb dieser Grenzen frei. Am häufigsten wird sie für fluide Typografie eingesetzt.
Media Queries erzeugen abrupte Größensprünge an bestimmten Breakpoints. clamp() sorgt für eine durchgehende, fließende Skalierung. Das macht dein CSS einfacher und das responsive Verhalten natürlicher.
Ja. clamp() funktioniert mit jeder CSS-Eigenschaft, die eine Länge akzeptiert – padding, margin, gap, width und mehr. Fluide Abstände sorgen für harmonischere Layouts, die sich natürlich an die Bildschirmgröße anpassen.
Der bevorzugte Wert folgt einer Formel wie calc(Xrem + Yvw), wobei X die Basis und Y die Änderungsrate ist. Das Tool berechnet beide Werte aus deinen Eingaben, sodass die Schriftgröße linear zwischen der von dir festgelegten minimalen und maximalen Viewport-Breite skaliert.