Clamp Reverse Analyzer
Analysiere bestehende CSS clamp()-Formeln und verstehe, wie sie sich als flüssige Design-Skala verhalten.
Dieses Tool zerlegt jede clamp()-Formel in ihre Design-System Logik und zeigt dir, was im Hintergrund wirklich passiert.
Du siehst dabei:
- welcher Wert dein Minimum definiert
- wie stark der Wert fluid skaliert (vw Anteil)
- welcher Offset die Skalierung stabilisiert (rem Anteil)
- in welchem Viewport-Bereich die Skalierung aktiv ist
Basierend auf einem 62.5%-Root-System (1rem = 10px statt 16px).
Warum 10px Root Font Size?
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: