Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
Baut ein `clamp()`, das eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert – der Ausdruck der fluiden Typografie, mit erledigter Arithmetik. Beide Enden sind in `rem`, und das ist der Teil, der entscheidet, ob das Ergebnis barrierefrei ist.
Anker
Der Ausdruck
Steigung
0,833vw
Achsenabschnitt
0,833rem
Bereich
1,000–1,500rem
rem, und das ist keine Stilfrage. Ein clamp in px ignoriert die Browser-Schriftgröße des Lesers vollständig — ein Verstoß gegen WCAG 1.4.4, den die schreibende Person nie erlebt, weil nicht sie es ist, die ihren Standard auf 24px gestellt hat. Der vw-Koeffizient bleibt ein Anteil des Viewports, und deshalb bewegt eine Änderung der Root-Größe oben die beiden Enden und lässt die Steigung in Ruhe.Was dabei herauskommt
| Viewport | Größe | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(begrenzt) | |
| 1920px | 24px(begrenzt) |
Gut zu wissen
- · Oberhalb des oberen Ankers ist die Größe festgesetzt, ein breiteres Fenster ändert sie also nicht mehr. Beide Anker stehen in rem, damit folgt sie weiterhin der Schriftgröße des Lesers — dieselbe Angabe in px täte das nicht.
Bauen Sie einen ganzen Satz davon? Die Typografie-Skala liefert die Stufengrößen, zwischen denen geklammert wird.
So funktioniert es
Setzen Sie die vier Anker
Die Größe bei Ihrem kleinsten Viewport, die Größe bei Ihrem größten, und die beiden Viewport-Breiten, bei denen sie gelten. Alles andere wird abgeleitet.
Prüfen Sie die aufgelöste Tabelle
Sie zeigt, wozu der Ausdruck bei einer Reihe realer Viewport-Breiten auswertet, und markiert die, bei denen das Clamp greift statt der Steigung.
Kopieren Sie die Deklaration
Ein `font-size: clamp(...)`. Steigung und Achsenabschnitt werden ebenfalls angezeigt, für den Fall, dass Sie es verstehen wollen statt einfügen.
Häufige Fragen
Warum sind die Einheiten `rem` und nicht `px`?
Weil ein `px`-Clamp die Browser-Schriftgröße des Lesers vollständig ignoriert. Wer seine Voreinstellung auf 24px gesetzt hat, weil er es braucht, bekommt trotzdem Ihre 16px – das ist ein Verstoß gegen WCAG 1.4.4, und einer, den der Autor nie selbst erlebt.
Sollten die Viewport-Enden meine Breakpoints sein?
Nicht unbedingt. Das Clamp behandelt alles dazwischen, die nützlichen Enden sind also das schmalste Telefon, das Sie unterstützen, und die Breite, jenseits derer der Text nicht weiter wachsen soll – oft um 1200–1400px statt Ihres größten Breakpoints.
Funktioniert Zoomen noch?
Seitenzoom, ja – er ändert die Viewport-Breite, und das Clamp folgt. Reiner Textzoom ist das, was die `rem`-Anker schützen: Der `vw`-Anteil reagiert nicht darauf, ohne eine `rem`-Komponente wäre der Text also eingefroren. Deshalb mischt der Ausdruck beide.
Kann ich es auch für Padding und Abstände verwenden?
Ja – der Ausdruck ist Einheitenarithmetik, und ihm ist egal, auf welcher Eigenschaft er landet. Die Ausgabe sagt `font-size`, weil das der häufige Fall ist; ändern Sie die Eigenschaft und behalten Sie den Wert.
Eingabe aus
Border-Radius-Generator
Border Radius Generator
Formt jede Ecke unabhängig, einschließlich der Zwei-Wert-Squircle-Syntax, und gibt das CSS aus.
CSS-Grid-Builder
CSS Grid Builder
Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.
Flexbox-Spielwiese
Flexbox Playground
Schaltet jede Flex-Eigenschaft an einem Live-Beispiel um und zeigt das CSS und was jede Eigenschaft geändert hat.
Seitenverhältnis-Rechner
Aspect Ratio Calculator
Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
CSS-Grid-Builder
CSS Grid Builder
Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.
Typografie-Skala
Type Scale Generator
Baut aus Basisgröße und Verhältnis eine modulare Schrift- und Abstandsskala, exportiert als CSS oder Tokens.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.