Muster mit Min-Width und Max-Width
Begrenzen Sie Elemente mit min-width und max-width auf angenehme Lesebreiten.
Muster mit Min-Width und Max-Width ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Überblick über min-width und max-width
min-width legt die minimale Größe fest, auf die ein Element schrumpfen kann. max-width legt die obere Grenze fest. Zusammen erzeugen sie responsive Elemente, die innerhalb eines definierten Bereichs flexibel bleiben.
max-width für lesbare Inhalte
Lange Textzeilen sind schwer zu lesen. Begrenzen Sie Textcontainer auf eine angenehme Zeilenlänge:
<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>max-width für zentrierte Container
Das klassische Muster für einen zentrierten Container mit max-width:
<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>min-width zum Verhindern des Schrumpfens
min-width verhindert, dass Elemente unter eine nutzbare Größe schrumpfen:
<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
<tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>Fluid zwischen Grenzwerten
Die Kombination aus width, min-width und max-width erzeugt ein fluides Element, das durch absolute Grenzwerte begrenzt wird:
<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>max-width: 100% für responsive Bilder
Verhindern Sie, dass Bilder ihren Container überlaufen:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />min() für max-width ohne CSS-Variable
Verwenden Sie min() als Einzeiler für eine fluide Breite mit einer maximalen Begrenzung:
<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>min-content und max-content als Werte
Verwenden Sie Schlüsselwörter für intrinsische Größen als Werte:
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>Tabellenspalten mit min-width
Verhindern Sie, dass Tabellenzellen unleserlich schmal werden:
<table style="border-collapse:collapse;width:100%;">
<tr>
<td style="border:1px solid #ccc;">Short</td>
<td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
</tr>
</table>Breitenbereiche für Media Queries
min-width und max-width werden auch in Media Queries verwendet, um responsive Breakpoints zu definieren:
<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>Container mit asymmetrischem Innenabstand
Zentrieren Sie den Inhalt auf sehr breiten Bildschirmen, und sorgen Sie gleichzeitig für ausreichend Abstand zu den Rändern:
<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>Kurzer Check
Welche CSS-Regel stellt sicher, dass Bilder immer in ihren übergeordneten Container passen, ohne verzerrt zu werden?
Zusammenfassung
max-width begrenzt die Elementgröße für lesbare Inhalte und zentrierte Container. min-width verhindert, dass Elemente unter nutzbare Abmessungen schrumpfen. Die Kombination beider Eigenschaften erzeugt fluide Elemente, die zwischen definierten Grenzen flexibel bleiben. Fügen Sie Bildern für ein responsives Verhalten immer max-width: 100%; height: auto hinzu.
Häufig gestellte Fragen
Ist die Lektion „Muster mit Min-Width und Max-Width“ kostenlos?
Ja — der vollständige Text von „Muster mit Min-Width und Max-Width“ 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 „Muster mit Min-Width und Max-Width“?
Begrenzen Sie Elemente mit min-width und max-width auf angenehme Lesebreiten. 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 3 von 4.
Wie lange dauert die Lektion „Muster mit Min-Width und Max-Width“?
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
- Mobile-First- vs. Desktop-First-Ansatz
- Fließende Breiten mit Prozentangaben
- Muster mit Min-Width und Max-Width
- Responsive Bilder und das Picture-Element