Tool Hub

CSS clamp() Rechner

Min/Max-Schriftart · Ansichtsfenster → responsiv clamp() Formel

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS
font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

Wie man es benutzt

  1. Geben Sie die minimale Schriftgröße in Pixeln und die maximale Schriftgröße in Pixeln ein.
  2. Geben Sie die minimale Viewport-Breite und die maximale Viewport-Breite ein, wo diese Schriftgrößen gelten.
  3. Ziehen Sie den Vorschau-Schieber, um zu simulieren, wie die Schrift bei verschiedenen Viewport-Breiten skaliert und lesen Sie den Live-Pixelwert.
  4. Kopieren Sie den generierten clamp()-Ausdruck und fügen Sie ihn in Ihren CSS ein.

Beispiele

  • Minimale Schriftgröße 16px, maximale Schriftgröße 32px, Minimum-Viewport 320px, Maximum-Viewport 1280px erzeugt clamp(16px, 1.667vw + 10.667px, 32px).
  • Bei einem Vorschau-Viewport von 800px zeigt die Live-Anzeige ungefähr 23px, was die reibungslose Skalierung zwischen den beiden Extremen bestätigt.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.