CSS Clamp Generator
Flüssige CSS clamp()-Werte für Schriftgrößen mit Live-Vorschau und Skalengenerator.
① Min/Max-Größen und Viewports einstellen ② Generieren klicken ③ clamp()-Wert kopieren
Was ist CSS clamp() für flüssige Typografie?
Die CSS clamp(min, bevorzugt, max)-Funktion ermöglicht wirklich flüssige Typografie, die ohne Breakpoints zwischen zwei Viewport-Breiten skaliert. Der bevorzugte Wert kombiniert eine viewport-relative Einheit (vw) und einen rem-Versatz, berechnet so, dass die Schriftgröße genau dem Minimum am minimalen Viewport und dem Maximum am maximalen Viewport entspricht.
Häufig gestellte Fragen
CSS clamp(min, bevorzugt, max) nimmt drei Argumente. min ist der kleinste mögliche Wert, bevorzugt ist der ideale Wert (meist ein vw + rem Ausdruck), max ist die obere Grenze. Der Browser hält das Ergebnis immer zwischen min und max.
Die Steigung ist (maxGröße - minGröße) / (maxViewport - minViewport). Mit 100 multipliziert ergibt sich der vw-Koeffizient. Der rem-Achsenabschnitt ist (minGröße - Steigung × minViewport) / rootSize. Das finale clamp: clamp(minRem, KoeffVw + AchsenabschnittRem, maxRem).
Media Queries erzeugen abrupte Sprünge an definierten Breakpoints. clamp() erzeugt eine glatte lineare Interpolation über den gesamten Viewport-Bereich. Keine Breakpoints nötig, kürzerer Code, visuell ausgefeilter.
Für Vanilla CSS als Custom Properties in :root deklarieren. Für Tailwind v3 in theme.extend.fontSize. Für Tailwind v4 @theme in der CSS-Datei verwenden.
CSS clamp() wird seit 2020 von allen wichtigen Browsern unterstützt. Globale Unterstützung über 97%. Für Legacy-Browser einen Nur-px-Fallback vor der clamp()-Deklaration platzieren.
clamp() funktioniert für jede Längeneigenschaft, die von flüssiger Skalierung profitiert. Für Typografie eliminiert es @media für font-size. Für Abstände schafft es proportionale Layouts.
Häufige Probleme: (1) Falsche Basis-Schriftgröße — unterschiedliche rem-Basis verursacht falsche Berechnung. (2) Gemischte Einheiten ohne Konvertierung. (3) Min größer als Max. (4) Sehr großer vw-Koeffizient. Immer mit dem Viewport-Simulator testen.