Calcoid

CSS-clamp-Rechner

Erzeuge einen kopierfertigen CSS-clamp()-Wert für fließende Typografie. Lege Größen und Ansichtsfenster fest und vergleiche sechs Beispielbreiten in rem und px.

CSS-clamp-Rechner

Größe am schmalen Ansichtsfenster. 16 px sind ein üblicher Ausgangswert für Fließtext.

Größe am breiten Ansichtsfenster. Die Maximalgröße muss größer als die Mindestgröße sein.

Schmalstes unterstütztes Ansichtsfenster. 320 px passen zum iPhone SE.

Breitestes Ziel für dein Design. 1.440 px sind ein üblicher Desktopwert.

Der Browser verwendet oft 16 px. Der Wert dient der Umrechnung in rem.

CSS-clamp-Wert

font-size: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);

Alternative vollständig in Pixeln

font-size: clamp(16px, 13.7143px + 0.7143vw, 24px);

Steigung (vw)

0,7143vw

Y-Achse (Achsenabschnitt)

0,8571rem

Mindestgröße

1rem

Maximalgröße

1,5rem

Berechnete Größe bei üblichen Ansichtsfenstern

Unter 320 px greift die Mindestgröße. Über 1.440 px greift die Maximalgröße.

Breite des AnsichtsfenstersBerechnete GrößeIn rem
320 px16 px1 rem
480 px17,1429 px1,0714 rem
768 px19,2 px1,2 rem
1.024 px21,0286 px1,3143 rem
1.280 px22,8571 px1,4286 rem
1.440 px24 px1,5 rem

Häufige Fragen

Was macht die CSS-Funktion clamp()?
clamp(MIN, PREFERRED, MAX) gibt den mittleren Wert aus den drei Angaben zurück. Das Ansichtsfenster bestimmt den bevorzugten Wert bei jedem Layout-Durchlauf. Liegt er unter MIN, greift MIN. Liegt er über MAX, greift MAX. So ersetzt eine einzige Funktion mehrere Media Queries. Für fließende Typografie erzeugt der Rechner einen linearen bevorzugten Wert aus rem und vw.
Warum ist fließende Typografie besser als feste Breakpoints?
Feste Größen springen an einem Breakpoint direkt von einem Wert zum nächsten. Ein Text kann bei 768 px plötzlich größer werden, obwohl Geräte knapp unter und über dieser Breite ähnlich groß wirken. Ein CSS-clamp-Wert interpoliert dagegen für jede Ansichtsfensterbreite zwischen Mindest- und Maximalgröße. Du brauchst eine Deklaration statt mehrerer Media Queries.
Warum wird rem für fließende Typografie empfohlen?
rem bezieht sich auf die Schriftgröße des Wurzelelements. Dadurch reagiert die Ausgabe auf eine vom Browser festgelegte Standardschriftgröße. Pixelwerte skalieren bei normalem Seitenzoom ebenfalls. Prüfe unabhängig von der Einheit, ob Text bei 200 % Vergrößerung vollständig sichtbar bleibt und alle Funktionen erreichbar sind.
Wie funktioniert die Einheit vw im bevorzugten Wert?
1vw entspricht einem Prozent der aktuellen Ansichtsfensterbreite. Bei 1.000 px Breite sind das 10 px, bei 320 px sind es 3,2 px. Der Rechner multipliziert die Steigung pro Pixel mit 100 und erhält so den vw-Anteil. Zusammen mit dem Achsenabschnitt in rem entsteht ein fließender CSS-Wert ohne JavaScript und ohne Resize-Listener.
Unterstützen alle Browser CSS clamp()?
Aktuelle große Browser unterstützen clamp() ohne Herstellerpräfix. Sehr alte Browser, darunter Internet Explorer, unterstützen die Funktion nicht. Prüfe die Browsermatrix deines Projekts und setze bei Bedarf zuerst eine feste Fallback-Deklaration. Die Tabelle des Rechners zeigt, wie der Wert an üblichen Ansichtsfensterbreiten greift.

Änderungsverlauf

Aktualisierungen von CSS-clamp-Rechner, nach Datum gruppiert.

1 Aktualisierung

  1. CSS-clamp-Rechner hinzugefügt

    • Erzeuge einen kopierfertigen CSS-clamp()-Wert für fließende Typografie. Lege Größen und Ansichtsfenster fest und vergleiche sechs Beispielbreiten in rem und px.

Ähnliche Rechner

Weitere geprüfte Rechner im Themenbereich „Technik“.

CSS-Spezifitäts-RechnerCubic-Bezier-RechnerDatenspeicher-UmrechnerDatenübertragungszeit-RechnerDezimal-Binär-UmrechnerDelta-E-Farbdifferenz-Rechner