min(), max() und clamp() für fließende Werte
Begrenzen Sie Werte mit min(), max() und der Kurzschreibweise clamp() zwischen Minimal- und Maximalwerten.
min(), max() und clamp() für fließende Werte ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Vergleichsfunktionen?
CSS-Vergleichsfunktionen (min(), max(), clamp()) ermöglichen responsive Größenanpassungen, die sich ohne Media Queries an den Kontext anpassen – eleganter und kompakter als Ansätze mit Breakpoints.
min() – Den kleinsten Wert auswählen
min(a, b, ...) wertet alle Argumente aus und verwendet den kleinsten Wert. Das „Minimum“ bezieht sich hier auf das visuelle Ergebnis – also auf die am stärksten begrenzte Option.
<div class="container">Container</div>max() – Den größten Wert auswählen
max(a, b, ...) wählt den größten Wert aus und stellt dadurch sicher, dass stets eine untere Grenze eingehalten wird.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() begrenzt einen Wert auf einen bestimmten Bereich. Der bevorzugte Wert (das mittlere Argument) ist typischerweise fließend. Das Minimum und Maximum bilden absolute Grenzen.
<h1>Clamped Heading</h1>Fließende Typografie-Skalierung mit clamp()
Ersetzen Sie mehrere Überschreibungen an Breakpoints durch ein einzelnes clamp() pro Überschriftenebene:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Fließende Abstände mit clamp()
Wenden Sie fließende Größenanpassungen auch auf padding, margin und gap an – eine wichtige Technik für ein „intrinsisches“ Design:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() als Breitenbegrenzung
Das sauberste Container-Muster: immer 90 % des Viewports, aber nie breiter als 1200 px, mit einem einzigen Ausdruck:
<div class="wrapper">Wrapper</div>max() für eine minimale Schriftgröße
Stellen Sie sicher, dass Fließtext auf kleinen Viewports nie zu klein wird:
<p class="text-body">Body text that never gets too small.</p>min/max/clamp verschachteln
Diese Funktionen können für komplexe Einschränkungen verschachtelt werden:
<div class="element">Padded element</div>Vergleichsfunktionen im Grid
Verwenden Sie min() innerhalb von minmax() für eine sicherere Mindestbreite von Spalten:
<div class="grid"><div>Card</div></div>Browser-Unterstützung
Alle drei Vergleichsfunktionen werden von modernen Browsern vollständig unterstützt (Chrome 79+, Firefox 75+, Safari 11.1+). Anbieterpräfixe sind nicht erforderlich.
Kurzer Test
Eine Überschrift verwendet font-size: clamp(1rem, 3vw, 2.5rem). Bei welcher Viewport-Breite entspricht 3vw 1rem (bei einer Root-Schriftgröße von 16 px)?
Zusammenfassung
min() wählt den kleineren Wert aus (obere Begrenzung). max() wählt den größeren Wert aus (untere Grenze). clamp(min, preferred, max) begrenzt einen fließenden Wert. Zusammen ermöglichen diese Funktionen fließende Typografie und Abstände ohne Media Queries. Das leistungsfähigste Muster ist clamp(1.5rem, 4vw, 3rem) für automatisch responsive Überschriften.
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
Häufig gestellte Fragen
Ist die Lektion „min(), max() und clamp() für fließende Werte“ kostenlos?
Ja — der vollständige Text von „min(), max() und clamp() für fließende Werte“ 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() für fließende Werte“?
Begrenzen Sie Werte mit min(), max() und der Kurzschreibweise clamp() zwischen Minimal- und Maximalwerten. 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 2 von 4.
Wie lange dauert die Lektion „min(), max() und clamp() für fließende Werte“?
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
- calc() für dynamische Berechnungen
- min(), max() und clamp() für fließende Werte
- repeat() und minmax() in Grid
- color-mix() und relative Farbsyntax