So verwenden Sie den CSS-Clamp-Rechner
Geben Sie die Viewport-Breiten für Anfang und Ende des fließenden Bereichs ein. Legen Sie die gewünschte Größe an beiden Breiten fest, wählen Sie px oder rem und prüfen Sie die Root-Schriftgröße. Kontrollieren Sie die Vorschau und kopieren Sie den clamp()-Wert oder die vollständige font-size-Deklaration in Ihr CSS.
So funktioniert die clamp()-Berechnung
CSS clamp() verbindet eine untere Grenze, einen bevorzugten Wert und eine obere Grenze. Der Rechner bildet eine lineare Beziehung zwischen zwei Paaren aus Viewport-Breite und Größe. Der bevorzugte Wert kombiniert einen rem-Offset mit einem vw-Anteil; die äußeren Werte begrenzen das Ergebnis.
Ein Rechenbeispiel
Viewport von 320px bis 1280px, Schriftgröße von 16px bis 32px und Root-Schriftgröße 16px:
font-size: clamp(1rem, 0.66666667rem + 1.66666667vw, 2rem);
Bei einem 800px breiten Viewport beträgt die berechnete Größe ungefähr 24px.
Was passiert außerhalb des Viewport-Bereichs?
Unterhalb von 320px bleibt das Beispiel bei 16px, oberhalb von 1280px bei 32px. Auch abnehmende Größen sind möglich: Der bevorzugte Wert sinkt, während die äußeren Grenzen das Ergebnis begrenzen.
rem, px und die Root-Schriftgröße
px eignet sich für Maße aus einem Entwurf. rem bezieht sich auf die Schriftgröße des Root-Elements. Dieser Rechner für fließende Schriftgrößen erzeugt rem + vw mit rem-Grenzen. Stimmen Sie die Root-Schriftgröße auf Ihre Website ab: Eine Änderung kann die tatsächliche Größe beeinflussen. Die Viewport-Endpunkte passen genau zur Root-Schriftgröße der Berechnung.
Die Formel allein garantiert keine barrierefreie Typografie. Prüfen Sie Browser-Zoom und Textvergrößerung im tatsächlichen Layout.
Schriftgröße, padding und gap
Die erzeugte positive Länge kann auch für padding oder gap verwendet werden. Die Vorschau zeigt nur die Schriftgröße. Dieses Werkzeug berechnet einen fließenden Bereich, keine vollständige Typografieskala.
Häufige Fragen
Was erzeugt dieser CSS-Clamp-Rechner?
Einen clamp()-Ausdruck und eine vollständige font-size-Deklaration für einen linearen fließenden Bereich. Das Ergebnis verwendet rem-Grenzen und einen rem-Offset mit vw.
Wie wird der bevorzugte Wert berechnet?
Die Steigung ist die Differenz der Größen in Pixeln geteilt durch die Differenz der Viewport-Breiten. Der Offset ergibt sich aus der ersten Größe minus Steigung mal erster Breite. Der Offset wird in rem umgerechnet, die Steigung für vw mit 100 multipliziert.
Soll ich Größen in px oder rem eingeben?
px eignet sich für pixelbasierte Entwürfe, rem für Größen relativ zur Root-Schriftgröße. Beim Einheitenwechsel werden die Werte anhand der Root-Schriftgröße umgerechnet; ihre tatsächlichen Größen bleiben gleich.
Welche Root-Schriftgröße soll ich verwenden?
Verwenden Sie die berechnete Schriftgröße des Root-Elements Ihrer Website. Das Beispiel nutzt 16px. Bei px-Eingaben bleiben die Pixelgrößen bei einer Änderung erhalten; bei rem-Eingaben ändern sich deren Pixelwerte.
Kann die Größe auf breiteren Bildschirmen abnehmen?
Ja. Geben Sie am größeren Viewport eine kleinere Größe ein. Der bevorzugte Wert zieht vw ab; die äußeren clamp()-Grenzen bleiben aufsteigend sortiert.
Was passiert bei zwei gleichen Größen?
Der Rechner erzeugt einen konstanten clamp()-Wert. Gleiche Größen sind gültig, gleiche Viewport-Breiten hingegen nicht.
Kann ich das Ergebnis für padding oder gap verwenden?
Ja. Die positive Länge eignet sich auch für padding oder gap. Die Vorschau zeigt ausschließlich die Schriftgröße.
Machen rem und clamp() meinen Text barrierefrei?
Keine Formel garantiert barrierefreie Typografie. Prüfen Sie Browser-Zoom, Textvergrößerung, Kontrast und Ihr Layout. Eine andere Root-Schriftgröße verändert auch das tatsächliche Ergebnis.
Ersetzt das CSS line-clamp?
Nein. CSS line-clamp begrenzt sichtbare Textzeilen. Dieses Werkzeug berechnet fließende Längen für Schriftgrößen oder Abstände.
Werden meine Eingaben hochgeladen?
Die Berechnung erfolgt lokal im Browser und benötigt keine Berechnungs-API. Analyse und Werbung sind separate Dienste mit Ravens Einwilligungs- und Datenschutzeinstellungen.