Kategorie: Entwicklung
CSS-Clamp-Generator
Fließende Schriftgrößen ohne Media Queries
Geben Sie eine Mindest- und eine Maximalgröße samt der zugehörigen Viewport-Breiten an und erhalten Sie die clamp()-Deklaration, die dazwischen gleitet, mit einer Tabelle der Darstellung bei üblichen Breiten.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Viewport-Breite | Gerenderte Größe |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Vorschau
Fließende Typografie bleibt auf dem Handy lesbar und am Desktop im Verhältnis.
Die Deklaration entsteht auf der Seite. Nichts wird hochgeladen.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
clamp() hat den Stapel von Media Queries abgelöst, der eine Überschrift früher durch vier Größen schaltete. Heikel ist der mittlere Term: Er muss die Gerade durch Ihre beiden Punkte sein, also Steigung mal Viewport plus Achsenabschnitt, geschrieben als vw-Wert plus rem-Wert. Diese Rechnung übernimmt das Werkzeug. Beide Grenzen bleiben in rem, damit jemand mit vergrößerter Standardschrift weiterhin größere Schrift bekommt, und die Tabelle zeigt die tatsächlich gerenderte Größe bei 360, 768, 1024, 1280 und 1600 Pixeln. Derselbe Wert taugt für Innenabstände, Abstände und Ränder, nicht nur für Schrift.
So funktioniert es
- Tragen Sie die kleinste Größe und die Viewport-Breite ein, ab der sie gilt.
- Tragen Sie die größte Größe und die Breite ein, ab der sie nicht weiter wächst.
- Kopieren Sie die clamp()-Deklaration und prüfen Sie die Vorschautabelle.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Warum stehen die Grenzen in rem statt in px?
- Eine reine Viewport-Einheit ignoriert die Schriftgrößen-Einstellung des Browsers, was ein Barrierefreiheitsfehler ist. Grenzen in rem folgen der eigenen Voreinstellung der Besucherin oder des Besuchers.
- Geht das auch für Abstände?
- Ja. Der Wert ist einfach eine Länge und funktioniert für padding, margin, gap, width und alles andere, das eine Länge annimmt.
- Wird etwas an einen Server gesendet?
- Nein. Die Deklaration wird auf der Seite aus Ihren Zahlen berechnet, deshalb aktualisiert sie sich sofort.