CSS-clamp()-Generator
Erzeugen Sie eine fluide CSS-clamp()-Größe (responsive Typografie) zwischen zwei Bildschirmbreiten.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Eine Größe, die dem Bildschirm folgt
Geben Sie Min- und Max-Größe und die passenden Bildschirmbreiten ein: das Tool berechnet den clamp()-Wert zum Einfügen in Ihr CSS, mit einer Vorschau, die auf die Fensterbreite reagiert.
-
Min-/Max-Größe
Z. B. 16px bis 24px.
-
Referenzbildschirme
Z. B. 320px bis 1280px.
-
clamp() kopieren
In font-size, padding usw.
Beispiel: 16 → 24px (320 → 1280px)
| Posten | Wert |
|---|---|
| Min-/Max-Größe | 16px / 24px = 1rem / 1.5rem |
| Bildschirme | 320px → 1280px |
| Fluide Steigung | 0.833vw |
| Ergebnis | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
Bei 320px ist die Größe 16px, bei 1280px 24px, dazwischen variiert sie linear. 100 % lokale Berechnung.
Häufige Fragen
Wozu dient clamp()?
Die CSS-Funktion clamp(min, bevorzugt, max) begrenzt einen Wert zwischen Minimum und Maximum, mit einem bevorzugten Wert, der sich an die Bildschirmbreite anpasst. Es ist der moderne Weg zu fluiden Schriftgrößen ohne Media Queries.
Wie wird der bevorzugte Wert berechnet?
Man zieht eine Gerade zwischen (Min-Breite, Min-Größe) und (Max-Breite, Max-Größe). Der mittlere Teil kombiniert eine feste rem-Basis und eine vw-Steigung, z. B. 0.833rem + 0.833vw, begrenzt durch Min/Max in rem.
Warum rem und vw mischen?
vw lässt die Größe mit der Viewport-Breite wachsen (Fluidität); rem fügt eine feste Basis hinzu, damit die Steigung nicht bei null beginnt. Die Kombination ergibt ein lineares, lesbares Wachstum, das den Nutzer-Zoom respektiert.
Muss ich Min und Max behalten?
Ja. Ohne Grenzen würde der Text auf kleinen Bildschirmen winzig und auf sehr großen riesig. clamp() sperrt den Wert außerhalb Ihres Referenzbreiten-Bereichs.