jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-clamp()-Rechner

Berechne responsive CSS-clamp-Werte für Schriftgrößen und Abstände.

Tool wird geladen...

Was ist CSS-clamp()-Rechner?

CSS clamp() setzt einen Mindestwert, einen bevorzugten flieBenden Wert und einen Hochstwert in einem Ausdruck. Es wird haufig fur responsive SchriftgroBen und Abstande verwendet, da es zwischen mobiler und Desktop-Ansicht sanft skalieren kann, ohne mehrere Media Queries schreiben zu mussen.

Kurze Antwort

Berechnen Sie einen responsiven CSS-clamp()-Ausdruck fur flieBende Typografie, Abstande oder Layout-Werte. Geben Sie minimale und maximale GroBen mit Viewport-Bereichen ein, um einen Wert zu generieren, der sanft zwischen ihnen skaliert.

Last updated: 2026-06-11

Einschränkungen

  • clamp()-Werte sind statisch, sobald sie generiert wurden. Sie passen sich nicht an Anderungen im DOM, Benutzerinteraktionen oder Containerdimensionen an. Fur layoutabhangige Skalierung sollten Sie Container-Query-Einheiten in Betracht ziehen.
  • Der viewportbasierte bevorzugte Wert muss moglicherweise bei extremen BildschirmgroBen angepasst werden. Testen Sie den generierten clamp()-Wert auf sehr kleinen und sehr groBen Viewports, um zu bestatigen, dass die Kurve naturlich wirkt.
  • Dieses Tool verwendet die Viewport-Breite (vw) fur den bevorzugten Wert. Es berucksichtigt keine Container-Query-Einheiten (cqw) oder andere neuere CSS-Einheiten, die sich anders verhalten.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die kleinste und groBte GroBe ein, die die Eigenschaft verwenden soll.
  2. Geben Sie die Viewport-Breite ein, bei der der kleinste Wert beginnen soll, und die Viewport-Breite, bei der der groBte Wert enden soll.
  3. Wahlen Sie die CSS-Eigenschaft aus, die Sie generieren mochten.
  4. Kopieren Sie den clamp()-Ausdruck in Ihr Stylesheet und testen Sie ihn bei mobilen, Tablet- und Desktop-Breiten.

Wofür du es nutzen kannst

  • FlieBende Uberschriften ohne viele Media Queries erstellen.
  • Abstande sanft zwischen mobiler und Desktop-Ansicht skalieren.
  • Einen clamp()-Wert direkt in CSS kopieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Responsive UberschriftsgroBe

Eine Uberschrift soll auf Telefonen 32px und auf Desktops 64px betragen. Der Rechner erstellt einen clamp()-Wert, der zwischen diesen Punkten skaliert.

Beispiel

FlieBender Abschnittsabstand

Eine Landingpage benotigt kleinere Abstande auf mobilen Geraten und groBere auf Desktops. Verwenden Sie clamp() fur padding- oder gap-Werte anstelle mehrerer Breakpoints.

Haufige Fehler

  • Viewport-Bereiche zu verwenden, die nicht zum tatsachlichen Layout passen.
  • clamp() auf FlieBtext anzuwenden, ohne die Lesbarkeit zu prufen.
  • px- und rem-Werte ohne klare BasisgroBe zu mischen.

Überprüfung

  1. Uberprufen Sie das Element mit den Browser-Entwicklertools und bestatigen Sie, dass der clamp()-Wert bei minimalen, mittleren und maximalen Viewport-Breiten zu den erwarteten Pixelwerten aufgelost wird.
  2. Andern Sie die GroBe des Browserfensters langsam von mobiler Breite zu Desktop-Breite und bestatigen Sie, dass der Eigenschaftswert ohne Sprünge sanft ubergeht.

FAQ

Fragen zu CSS-clamp()-Rechner

Kann ich clamp() fur mehr als nur SchriftgroBen verwenden?

Ja. Es funktioniert fur viele langenbasierte CSS-Eigenschaften, einschlieblich margin, padding, gap, width und border-radius.

Ersetzt clamp() Media Queries?

Es kann viele groBenbezogene Media Queries reduzieren, aber Media Queries sind immer noch nutzlich, wenn sich die Layoutstruktur andert.

Sollte ich px oder rem verwenden?

Beide konnen funktionieren. rem ist oft besser fur SchriftgroBen, da es die Benutzerschriftarteinstellungen respektiert, wahrend px fur schnelle Layout-Berechnungen einfacher ist.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren