CSS-clamp()-Generator

CSS-clamp()-Generator: fluide Schriftgrößen und Abstände | We.Inc

Kostenloser CSS-clamp()-Generator. Lege eine Mindest- und eine Höchstgröße sowie die Bildschirmbreiten dazwischen fest und erhalte fluides CSS für font-size oder Abstände, das gleichmäßig skaliert.

CSS-clamp()-Generator

Gib eine Größe für kleine Bildschirme, eine für große Bildschirme und die Bildschirmbreiten an, bei denen sie jeweils gelten sollen, und erhalte eine einzige clamp()-Zeile, die dazwischen gleichmäßig wächst. Nutze sie für Überschriften, Fließtext, Padding und Gaps, damit ein Design mit dem Bildschirm skaliert, ohne einen Stapel Media Queries.

Gib die kleinste gewünschte Größe in Pixeln ein und die Bildschirmbreite, bei der sie gelten soll (oft 320 oder 375 Pixel für Smartphones).
Gib die größte Größe ein und die Bildschirmbreite, ab der sie nicht mehr wachsen soll (oft 1200 bis 1440 Pixel).
Das Tool berechnet die Gerade zwischen diesen beiden Punkten und schreibt sie als rem plus vw in clamp().
Kopiere die CSS-Zeile in dein Stylesheet. Ändere den Eigenschaftsnamen, wenn du Padding, Margin oder Gap statt Text skalierst.

Behalte einen rem-Anteil im mittleren Wert. Eine Größe nur aus vw ignoriert die Schriftgrößen-Einstellung im Browser der Besucher, und Text-Zoom funktioniert nicht mehr; eine Mischung aus rem und vw erhält den Zoom.
Lass Fließtext auf Smartphones nicht unter 16 Pixel fallen. Fluide Größen lohnen sich vor allem bei Überschriften, wo der Unterschied zwischen Handy- und Desktop-Größe groß ist.
Verwende für jedes clamp() einer Website dieselben zwei Bildschirmbreiten. Dann beginnen und enden alle Größen gleichzeitig zu wachsen, und die Proportionen des Designs bleiben stabil.
Weicht die Root-Schriftgröße deiner Website von 16 Pixeln ab, stelle das Feld für die Root-Größe passend ein, sonst liegt jeder rem-Wert um denselben Faktor daneben.

Häufige Fragen

Wie funktioniert CSS clamp()?

clamp(MIN, BEVORZUGT, MAX) verwendet den bevorzugten Wert, geht aber nie unter MIN oder über MAX. Mit clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) ist Text auf schmalen Bildschirmen 16 Pixel groß, auf breiten 24 Pixel und wächst dazwischen linear.

Welche Formel steckt hinter dem mittleren Wert?

Die Steigung ist (Höchstgröße minus Mindestgröße) geteilt durch (Höchstbreite minus Mindestbreite). Der vw-Anteil ist die Steigung mal 100. Der feste Anteil ist die Mindestgröße minus Steigung mal Mindestbreite, geteilt durch die Root-Schriftgröße, um ihn in rem umzurechnen. Für 16 bis 24 Pixel zwischen 320 und 1280 Pixel breiten Bildschirmen: Steigung = 8 / 960 = 0.008333, also 0.8333vw; fester Anteil = 16 minus 2.6667 = 13.3333 Pixel, das sind 0.8333rem.

Wird clamp() von allen Browsern unterstützt?

Ja. Alle aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützen clamp(). Nur Browser, die mehrere Jahre veraltet sind, ignorieren es und greifen auf die Größe zurück, die du weiter oben im CSS gesetzt hast.

Kann etwas kleiner werden, wenn der Bildschirm breiter wird?

Ja. Gib für den kleinen Bildschirm eine größere Größe ein als für den großen. Die Steigung wird negativ, und das Tool setzt trotzdem die kleinere Größe zuerst in clamp(), wie es die Funktion verlangt.

Sollte ich clamp() auch für Abstände nutzen?

Es eignet sich gut für Abschnitts-Padding und Grid-Gaps, die auf Smartphones oft zu groß und auf breiten Bildschirmen zu eng wirken. Verwende dieselben Bildschirmbreiten wie für die Schrift, damit Abstände und Text gemeinsam skalieren.

Warum fluide Größen zwei Ankerpunkte brauchen

Eine fluide Größe ist eine Gerade zwischen zwei Punkten: der gewünschten Größe bei einer kleinen Bildschirmbreite und der gewünschten Größe bei einer großen. clamp() verhindert dann, dass die Gerade über eines der Enden hinausläuft. Die beiden Punkte gut zu wählen ist wichtiger als die genauen Zahlen: Nimm die schmalste Smartphone-Breite, für die du gestaltest, und die Breite, ab der deine Inhaltsspalte nicht mehr breiter wird.
Liegt der große Anker weit jenseits deiner Inhaltsspalte, wächst der Text auf großen Monitoren weiter, obwohl das Layout nicht mehr breiter wird, und Überschriften wirken neben einer Spalte mit fester Breite überdimensioniert. Wenn der große Anker zur Breite deines Containers passt, lässt sich das vermeiden.

Barrierefreiheit und Zoom

Browser erlauben es, die Standardschriftgröße zu erhöhen, und viele Menschen mit eingeschränktem Sehvermögen sind darauf angewiesen. Eine Größe nur in vw-Einheiten ignoriert diese Einstellung völlig. Der rem-Anteil im mittleren Wert sorgt dafür, dass eine fluide Größe auf die Wahl der Besucher reagiert, und deshalb schreibt dieses Tool den festen Anteil immer in rem.
Prüfe das Ergebnis, indem du die Seite auf 200 Prozent zoomst. Mit clamp() geschriebener Text sollte weiter wachsen. Ändert sich eine Überschrift kaum, ist der vw-Anteil im Vergleich zum rem-Anteil zu groß; verringere den Abstand zwischen Mindest- und Höchstgröße und teste erneut.

CSS-Eigenschaft

Mindestgröße

Höchstgröße

Bildschirmbreite für die Mindestgröße

Bildschirmbreite für die Höchstgröße

Root-Schriftgröße

Zuwachs pro 100px Bildschirmbreite

Fester Anteil

Die Bildschirmbreite für die Höchstgröße muss größer sein als die für die Mindestgröße.

CSS-clamp()-Generator