CSS-clamp()-Rechner

Tragen Sie die Größe für kleine Bildschirme ein, die Größe für große und die beiden Viewport-Breiten dazwischen. Der Rechner bildet den clamp()-Wert, der eine Gerade zwischen diesen beiden Punkten zieht, und zeigt die Größe bei sieben gängigen Breiten. Der Beispielsatz in der Vorschau ist tatsächlich mit dem erzeugten Wert gesetzt, ändert sich also beim Verkleinern des Fensters.

Werden meine Daten irgendwohin hochgeladen?

Nein. Hier passiert nur Rechnen im Browser. Die eingegebenen Zahlen gehen nie an einen Server, und hinter dem Ergebnis stehen weder Konto noch Protokoll noch eine Netzwerkanfrage.

Wie funktioniert die Rechnung?

clamp() nimmt drei Werte: ein Minimum, einen bevorzugten Wert und ein Maximum. Der Browser verwendet den bevorzugten Wert, lässt ihn aber nie unter das Minimum fallen oder über das Maximum steigen.

Interessant ist der bevorzugte Wert. Er muss mit dem Viewport wachsen, und genau dafür gibt es vw: 1vw ist ein Prozent der Viewport-Breite. Um von 16px bei 320px Viewport auf 48px bei 1280px zu kommen, muss die Größe über 960px Breite um 32px zulegen, also 0,0333px pro Pixel oder 3.3333vw. Die Steigung allein träfe die gewünschten Größen aber nicht, deshalb schiebt ein fester Versatz die Gerade an die richtige Stelle. Heraus kommt clamp(1rem, 0.3333rem + 3.3333vw, 3rem), und dieser Versatz ist der Grund, warum der mittlere Term aus zwei Teilen besteht.

Zahlen werden auf vier Nachkommastellen gerundet, angehängte Nullen fallen weg. Sie bekommen also 1.5rem statt 1.5000rem. Größen werden in Pixel eingegeben; die Ausgabeeinheit rem teilt sie durch die Root-Schriftgröße, die in den Standardeinstellungen jedes Browsers 16px beträgt.

Was passiert bei unsinnigen Zahlen?

Der Rechner sagt Bescheid, statt stillschweigend etwas Falsches auszugeben. Sind beide Viewport-Breiten gleich, gibt es keinen Bereich zum Skalieren: Die Größe bleibt konstant und der vw-Term verschwindet. Sind Mindest- und Maximalgröße gleich, erscheint aus demselben Grund eine Warnung.

Aufpassen sollte man bei einem Minimum über dem Maximum. CSS löst clamp() als max(MIN, min(VALUE, MAX)) auf, also gewinnt das Minimum und die Größe bleibt für immer dort stehen. Browser tun das kommentarlos. Die Vorschautabelle zeigt den festgesetzten Wert, eine Warnung erklärt ihn.

Wo braucht man das?

Überschriften, die am Desktop groß und am Handy lesbar sein sollen, Abschnittsabstände, die auf einem 375px-Display nicht bei 8rem bleiben dürfen, Abstände in einem Karten-Raster und Hero-Text, der bei jeder Breite seinen Platz füllen soll.