CSS Academy · Lektion

Min-, Max- und Clamp-Funktionen

Verwenden Sie min(), max() und clamp() für adaptive Größen, die auf die Container- oder Viewportgröße reagieren.

Lektion 4 von 413 Schritte

Min-, Max- und Clamp-Funktionen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum CSS-Vergleichsfunktionen?

Mit CSS-Vergleichsfunktionen können Sie bedingte Größen ohne JavaScript ausdrücken: „Verwenden Sie diese Größe, aber niemals eine kleinere bzw. größere als diese Grenzwerte.“ Sie bilden die Grundlage moderner, fließender, responsiver Designs.

Die Funktion min()

min() gibt den kleinsten Wert aus einer durch Kommas getrennten Liste zurück. Der Browser wählt den Wert aus, der bei der aktuellen Viewport-Größe am kleinsten ist.

<div class="container">Container width: min(800px, 90%)</div>

Die Funktion max()

max() gibt den größten Wert zurück. Das ist nützlich, um Mindestgrößen festzulegen, die trotzdem wachsen können.

<p>Text sized with max(1rem, 2vw)</p>

Die Funktion clamp()

clamp(min, preferred, max) begrenzt einen Wert auf einen Bereich zwischen einem Minimum und einem Maximum. Der bevorzugte Wert ist normalerweise fließend (z. B. vw).

<h1>Clamped Heading</h1>

clamp() für fließende Typografie

Fließende Typografie mit clamp() macht mehrere Überschreibungen der Schriftgröße in Media Queries überflüssig:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() für fließende Abstände

Dasselbe Muster lässt sich auf Abstände anwenden, um Ränder und Innenabstände automatisch responsiv zu gestalten:

<div class="section">Section with fluid padding</div>

min() für Container

Ein sicheres Container-Muster, das niemals eine maximale Breite überschreitet und nie horizontales Scrollen verursacht:

<div class="wrapper">Safe wrapper container</div>

Verschachtelte Funktionen

Vergleichsfunktionen lassen sich für komplexe Ausdrücke verschachteln:

<p class="hero-text">Nested min/max inside clamp()</p>

calc() kombiniert mit clamp()

Verwenden Sie calc() innerhalb von clamp(), um präzise fließende Übergänge zwischen zwei Größen zu erstellen:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS bietet außerdem Schlüsselwortwerte für Größen:

min-content: die kleinstmögliche Größe ohne Überlauf
max-content: nimmt so viel Platz ein, wie der Inhalt benötigt
fit-content(): wie max-content, aber auf einen angegebenen Grenzwert beschränkt

<span class="tag">Tag label</span>

Browserunterstützung

min(), max() und clamp() werden von allen modernen Browsern unterstützt. Es sind keine Präfixe erforderlich. Die Funktionen können überall verwendet werden, wo ein Wert für Länge, Frequenz, Zeit oder Zahl erwartet wird.

Kurzer Test

Eine Überschrift verwendet font-size: clamp(1rem, 4vw, 3rem) in einem 600 px breiten Viewport. Wie groß ist die Schrift?

Beantworte es in der interaktiven Lektion

Zusammenfassung

min() wählt den kleinsten Wert, max() den größten. clamp(min, preferred, max) begrenzt einen fließenden Wert innerhalb festgelegter Grenzen. Diese Funktionen ermöglichen moderne fließende Typografie und Abstände und machen häufig mehrere Überschreibungen in Media Queries überflüssig.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Min-, Max- und Clamp-Funktionen“ kostenlos?

Ja — der vollständige Text von „Min-, Max- und Clamp-Funktionen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Min-, Max- und Clamp-Funktionen“?

Verwenden Sie min(), max() und clamp() für adaptive Größen, die auf die Container- oder Viewportgröße reagieren. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Min-, Max- und Clamp-Funktionen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy