CSS Clamp()-Rechner

CSS clamp(MIN, PREFERRED, MAX) ermöglicht es, einen ganzen Stapel von Media Queries durch eine einzige Deklaration zu ersetzen: Der Wert bleibt bei MIN unterhalb des kleinsten Viewports, bei MAX oberhalb des größten und skaliert dazwischen fließend. Der schwierige Teil ist der PREFERRED-Term – ein viewport-relativer Ausdruck wie 0,833rem + 0,833vw – den niemand von Hand ableiten möchte. Dieser Rechner berechnet ihn tatsächlich aus vier Zahlen: einer Minimalgröße, einer Maximalgröße und der Viewport-Breite, bei der sie jeweils gelten.

Jeder Zwischenwert wird angezeigt, nicht nur die finale Zeile: die Steigung (wie viele Größeneinheiten der Wert pro Pixel Viewport zunimmt), dieselbe Steigung als vw-Koeffizient ausgedrückt und der y-Achsenabschnitt – die Konstante, die zum vw-Term addiert wird, sodass die Gerade exakt durch die beiden von Ihnen festgelegten Punkte verläuft. Jeder, der schon einmal einen clamp()-Wert aus einem Tutorial übernommen hat, ohne ihn zu verstehen, kann hier die tatsächliche Arithmetik sehen und überprüfen.

Ein Viewport-Breiten-Schieberegler steuert eine Live-Vorschau-Box, sodass die fließende Skalierung sichtbar und nicht nur berechnet wird: Ziehen Sie ihn zwischen die minimalen und maximalen Haltepunkte und beobachten Sie, wie der Beispieltext genau so skaliert, wie er es in einem echten Browserfenster beim Ändern der Größe tun würde. Die Ausgabezeile und die Aufschlüsselung aktualisieren sich bei jedem Tastendruck – das passt auf natürliche Weise zum px-zu-rem-Konverter, wenn auch die Basis-Schriftgröße selbst konvertiert werden muss.

Wechseln Sie in den Typografieskala-Modus für ein vollständiges fließendes Typografie-System in einem Schritt: Geben Sie eine Grundgröße und ein modulares Verhältnis (1,125 bis 1,5) ein und erhalten Sie sechs Größen – small, base, h4, h3, h2 und h1 – jede als eigene clamp()-Zeile berechnet zwischen einer sanfteren mobilen Progression und dem vollen Desktop-Verhältnis, bereit zum Kopieren als Block mit CSS Custom Properties.