Text, der ohne Media Queries mitwächst
Eine Überschrift, die auf dem Handy 16 px und am Desktop 32 px misst, brauchte früher zwei oder drei Breakpoints. Mit clamp() genügt eine Zeile: Die Größe wächst zwischen Untergrenze und Obergrenze fließend mit dem Bildschirm. Schwierig ist der mittlere Wert, eine Mischung aus fester Größe und einem Prozentsatz der Bildschirmbreite. Dieser Generator rechnet ihn aus den beiden Größen aus, auf die es dir ankommt.
Einen clamp()-Wert in vier Schritten erzeugen
- Gib die kleinste und die größte Größe ein, zum Beispiel 16 und 32.
- Gib die Bildschirmbreiten ein, bei denen sie jeweils gelten, zum Beispiel 320 und 1280 Pixel.
- Wähle px oder rem und, falls deine Seite die Root-Schriftgröße ändert, die Pixel pro 1rem. Mit der CSS-Eigenschaft erhältst du eine fertige Deklaration.
- Kopiere den Wert oder die Deklaration. Tabelle und Regler zeigen die Größe bei jeder Breite dazwischen.
Was die drei Teile von clamp() tun
Das Ergebnis sieht aus wie clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Der erste Wert ist die kleinste Größe, die die Eigenschaft annehmen kann, der letzte die größte, und der mittlere die Gerade dazwischen. Das Tool berechnet die Steigung aus dem Größenunterschied geteilt durch den Breitenunterschied und den festen Anteil aus dem Punkt, an dem die Gerade die Bildschirmbreite null schneidet. Soll die Größe auf großen Bildschirmen schrumpfen, setzt das Tool den kleineren Wert nach vorn, weil clamp() immer das Minimum zuerst erwartet.
Mit rem bleibt der Zoom erhalten
Größen in rem folgen der Schriftgröße, die ein Besucher im Browser eingestellt hat, px-Werte nicht. Eine reine vw-Größe ignoriert die Zoom-Einstellung völlig, was Barrierefreiheitsprüfungen nicht bestehen kann. Ein rem-Anteil zusammen mit dem vw-Anteil, wie ihn dieses Tool bei rem-Größen erzeugt, hält den Text zoombar. Teste dein Design bei 200 % Zoom und halte die größte Größe bei höchstens etwa dem Zweieinhalbfachen der kleinsten.
Nichts verlässt deinen Browser
Die Werte werden auf der Seite berechnet. Der Generator stellt keine Netzwerkanfrage und speichert nichts.