CSS-Clamp()-Rechner
Berechnen Sie einen echten, flüssigen CSS-clamp()-Wert aus einer minimalen und maximalen Größe über zwei Ansichtsfensterbreiten hinweg, wobei die Neigung und der Schnittpunkt Schritt für Schritt angezeigt werden und eine Live-Größenvorschau angezeigt wird.
Ergebnis
Mit der CSS-Klammer (MIN, PREFERRED, MAX) kann eine Deklaration einen ganzen Stapel von Medienabfragen ersetzen: Der Wert bleibt bei MIN unter dem kleinsten Ansichtsfenster, bei MAX über dem größten und skaliert dazwischen reibungslos. Der schwierige Teil ist der BEVORZUGTE Begriff – ein auf das Ansichtsfenster bezogener Ausdruck wie 0,833rem + 0,833vw – den niemand von Hand ableiten möchte. Dieser Rechner berechnet die tatsächliche Größe aus vier Zahlen: einer Mindestgröße, einer Maximalgröße und der Breite des Ansichtsfensters, bei der jeder Wert gilt.
Es wird jede Zwischenzahl angezeigt, nicht nur die letzte Linie: die Steigung (um wie viele Größeneinheiten der Wert pro Pixel des Ansichtsfensters wächst), dieselbe Steigung, ausgedrückt als vw-Koeffizient, und der Y-Achsen-Schnittpunkt – die Konstante, die zum vw-Term hinzugefügt wird, sodass die Linie genau durch die beiden von Ihnen angegebenen Punkte verläuft. Jeder, der einen „clamp()“-Wert aus einem Tutorial eingefügt hat, ohne ihn zu verstehen, kann hier die eigentliche Arithmetik sehen und überprüfen.
Ein Schieberegler für die Breite des Ansichtsfensters steuert ein Live-Vorschaufeld, sodass die fließende Skalierung sichtbar und nicht nur berechnet wird: Ziehen Sie ihn zwischen den minimalen und maximalen Haltepunkten und beobachten Sie, wie sich die Größe des Beispieltexts genau so ändert, wie dies bei der Größenänderung eines echten Browserfensters der Fall wäre. Die Ausgabezeile und die Aufschlüsselung werden bei jedem Tastendruck aktualisiert – dies lässt sich natürlich mit dem px-zu-rem-Konverter kombinieren, wenn auch die Basisschriftgröße selbst konvertiert werden muss.
Wechseln Sie in einem Schritt in den Typ-Skalen-Modus für ein vollständiges flüssiges Typografiesystem: Geben Sie eine Basisgröße und ein Modulverhältnis (1,125 bis 1,5) ein und erhalten Sie sechs Größen – klein, Basis, h4, h3, h2 und h1 – jeweils berechnet als eigene Klammer()-Linie zwischen einer sanfteren mobilen Progression und dem vollständigen Desktop-Verhältnis, bereit zum Kopieren als Block benutzerdefinierter CSS-Eigenschaften.