CSS-Clamp-Rechner für fließende Größen

Legen Sie Größen und zugehörige Viewportgrenzen fest. Verändern Sie die Vorschau, um den fließenden Wert dazwischen zu prüfen.

Läuft lokal in deinem Browser

Kategorie ansehen: Frontend & Design (34)

· clamp() · vw · rem

960px

So entsteht eine clamp()-Regel aus zwei Größen-Eckwerten

Der Rechner macht aus zwei Größen-Eckwerten und den Viewportbreiten, an denen sie gelten, einen einzigen clamp()-Ausdruck. Er schreibt die Regel für font-size, padding, gap oder margin, zeigt den Wert an jeder Breite im Bereich und kopiert das fertige CSS. Alles läuft in der Seite.

Die Vorschau verändert nicht Ihr Fenster: Der Regler simuliert eine Viewportbreite, und das Demo-Element erhält denselben px-Wert, den der Ausdruck bei dieser Breite ergäbe. Unterhalb der kleineren Breite hält der Browser die Mindestgröße, oberhalb der größeren die Maximalgröße.

Wählen Sie die CSS-Eigenschaft, die die Regel setzen soll: font-size, padding, gap oder margin.

Tragen Sie minimale und maximale Größe in px sowie die zugehörigen Viewportbreiten ein. Die Vorgaben — 16 px und 32 px über 320 px und 1440 px — beschreiben eine Überschrift, die vom Smartphone zum Desktop wächst.

Wählen Sie die Ausgabeeinheit. rem teilt jede Länge durch die Wurzel-Schriftgröße, standardmäßig 16 und editierbar; px behält die eingegebenen Zahlen. Der vw-Koeffizient ist in beiden Fällen gleich.

Ziehen Sie den Vorschau-Regler oder tippen Sie eine Breite im Bereich ein, um den aufgelösten Wert daneben abzulesen. Die drei Chips unter der Vorschau zeigen den Wert an minimaler, mittlerer und maximaler Breite.

Copy CSS übernimmt die vollständige Regel; Reset setzt alle acht Felder auf ihre Vorgaben zurück.

Die Rechnung hinter der clamp()-Zeichenkette

Von zwei Eckwerten zur clamp()-Zeichenkette

Der Ausdruck ist die Gerade zwischen den beiden Eckwerten. Mit den Vorgaben ist die Steigung (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw und der Achsenabschnitt 16 − 1.4286 × 320 ÷ 100 = 11.4286px, die Regel lautet also clamp(1rem, 0.7143rem + 1.4286vw, 2rem).

Bei 960 px ergibt der mittlere Term 0.7143rem + 1.4286vw = 25.14px — genau das zeigen die Anzeige und das Vorschau-Element. Die Terme werden auf vier Nachkommastellen gerundet, der angezeigte Wert auf zwei.

rem-Ausgabe und die Wurzel-Schriftgröße

Mit der Einheit rem wird jede Länge im Ausdruck durch die Wurzel-Schriftgröße geteilt: bei den vorgegebenen 16 px wird aus 16 → 32 px die Spanne 1rem → 2rem, mit einer Wurzel von 20 werden daraus 0.8rem → 1.6rem. Der vw-Koeffizient wird nicht umgerechnet, denn ein vw ist ein Anteil der Viewportbreite und nicht der Wurzel.

Das Wurzel-Feld ist eine Umrechnungskonstante und keine Einstellung, die an den Browser geht. Die gerenderte Größe passt nur dann zur Vorschau, wenn das Feld zur html-Schriftgröße der Seite passt, in die die Regel eingefügt wird.

Was die Felder annehmen — und wann die Ausgabe leer bleibt

Größen akzeptieren Dezimalwerte und müssen 0 oder größer sein; das Maximum darf nicht kleiner als das Minimum sein, und die größere Viewportbreite muss über der kleineren liegen. Gleiche Eckwerte sind erlaubt und ergeben eine flache Regel wie clamp(1rem, 1rem + 0vw, 1rem).

Ein unmöglicher Bereich oder ein leeres Größen- bzw. Breitenfeld leert Regel, Musterchips, Anzeige und Vorschau und deaktiviert Copy CSS, bis der Bereich wieder gültig ist — die Zwischenablage erhält also nie eine Regel, die nicht zu den sichtbaren Feldern passt. Das Wurzel-Feld ist nur bei der Einheit rem erforderlich.