Infinite CSS Clamp Generator
Dieser Generator erstellt eine unbegrenzt skalierende CSS clamp()-Formel.
Du definierst:
- einen minimalen Wert
- einen Start-Viewport
- einen Zielwert bei einer bestimmten Viewport-Breite
Aus diesen Werten wird eine fluid responsive Skalierung berechnet.
Der Zielwert dient dabei nur als Referenzpunkt für die Berechnung — nicht als echtes Maximum.
Das bedeutet: Der Wert wächst auch oberhalb des Ziel-Viewports dynamisch weiter mit der Bildschirmbreite.
Beispiel:
Ein Wert erreicht 4rem bei 1440px, wächst auf grösseren Screens aber weiter proportional mit.
Basierend auf einem 62.5%-Root-System (1rem = 10px statt 16px).
Browser verwenden standardmässig eine Root Font Size von 16px.Viele moderne Design-Systeme setzen jedoch auf ein sogenanntes 62.5%-System.
Dabei wird im HTML-Element folgende Basis gesetzt:
html {font-size: 62.5%;}
Da 62.5% von 16px genau 10px entsprechen, gilt anschliessend 1rem = 10px.
Dadurch lassen sich rem-Werte deutlich einfacher berechnen:
Was unterscheidet Infinite Clamp von klassischem clamp()?
Ein klassisches clamp(min, preferred, max) hört bei einem festen Maximalwert auf zu wachsen. Infinite Clamp verzichtet bewusst auf diese Obergrenze: Der Wert wächst über den Ziel-Viewport hinaus linear weiter – ideal für High-End-Displays, Ultra-Wide-Monitore oder Design-Systeme, bei denen ein hartes Maximum die Skalierung auf grossen Screens künstlich einschränken würde.
Wann ergibt unbegrenztes Wachstum Sinn?
Für Fliesstext ist ein Maximum meist sinnvoll – niemand will auf einem 8K-Monitor 400px grosse Schrift. Für grosszügige Elemente wie Hero-Headlines, dekorative Zahlen oder Abstände in sehr breiten Layouts kann ein Wert dagegen bewusst proportional mitwachsen, damit die Komposition auf jeder Bildschirmgrösse ausgewogen bleibt statt "verloren" zu wirken.
Wie die Formel funktioniert
Statt eines dritten, begrenzenden clamp()-Arguments verwendet dieses Tool intern denselben linearen Ansatz wie clamp() – vw-Anteil plus rem-Offset –, gibt aber keinen festen Endwert vor. Der Ziel-Viewport dient nur als Referenzpunkt für die Berechnung der Steigung, nicht als tatsächliches Maximum.