CSS-Kurs / Fließende Layouts mit min(), max-width und clamp()

Ein fließendes Layout lässt Dimensionen sich an den verfügbaren Platz anpassen und setzt gleichzeitig nützliche Begrenzungen. Relative Breiten, max-width und Funktionen wie clamp() können Inhalte lesbar halten, ohne auf jedem Bildschirm dieselben festen Dimensionen erzwingen zu müssen.

Unterscheiden Sie zwischen Viewport-Breite und verfügbarer Breite

Der Bereich, in dem eine Webseite im Browser angezeigt wird, wird als Viewport bezeichnet. Die verfügbare Breite für Karten im Inhaltsbereich kann jedoch kleiner sein als der Viewport. Dies liegt daran, dass die Karte in den verbleibenden Platz passen muss, ohne die Ränder des übergeordneten Elements, den Abstand zu anderen Spalten und das maximale Breitenlimit zu überschreiten.

Der Prozentsatz in width: 100% bezieht sich auf die Breite des Basisbereichs, der das Element in einem typischen Blocklayout umgibt. 100vw basiert auf der Viewport-Breite, sodass es selbst dann, wenn es in eine kleine Karte gesetzt wird, so groß wie der gesamte Bildschirm sein kann. Wenn vertikale Bildlaufleisten und äußere Ränder hinzugefügt werden, kann ein horizontaler Überlauf auftreten. Für die Breite der Elemente im Body sollten zuerst Prozentangaben oder automatische Größe in Betracht gezogen werden.

Den Inhaltsbereich begrenzen und zentrieren

*, *::before, *::after { box-sizing: border-box; }
.content {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Mit border-box passen Innenabstände (Padding) und Rahmen (Borders) innerhalb der deklarierten Breite. Wenn die Schriftgröße der Wurzel 16px beträgt und der übergeordnete Container 390px breit ist, beträgt die Außenbreite dieses Inhaltsfeldes 390px, wobei 16px Innenabstand auf jeder Seite bleiben, was 358px für den Inhalt lässt. Bei einer übergeordneten Breite von 1000px stoppt die Außenbreite bei 768px und automatische Ränder zentrieren es. Für weitere Details siehe CSS Breite, Höhe, min/max-Grenzen und box-sizing.

Die Anwendung von content-box auf dasselbe Element fügt width: 100% Padding hinzu, wodurch es breiter als sein übergeordnetes Element wird. Andererseits werden Abstände (Margins) ebenfalls nicht im Border-Box-Modell berücksichtigt. Wenn Sie width: 100% und feste Außenabstände auf beiden Seiten zusammen festlegen, müssen Sie die Gesamtsumme überprüfen. Wenn min-width und max-width im Widerspruch stehen, prüfen Sie auch min-width, da die min-width dazu führen kann, dass es größer wird.

Verwenden Sie min() und clamp()

min() wählt den kleineren Wert unter den Kandidaten aus. width: min(100%, 48rem) verwendet den kleineren Wert zwischen der Breite des übergeordneten Elements und 48rem, sodass die zuvor angegebenen 100% und maximalen Breitenbeschränkungen in einer Deklaration ausgedrückt werden können.

.content { width: min(100%, 48rem); }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

clamp(minimum, preferred, maximum) berechnet den bevorzugten Wert und begrenzt ihn auf das angegebene Minimum und Maximum. Es berechnet keinen arithmetischen Mittelwert. Im obigen Titel basiert rem auf der Schriftgröße der Wurzel und vw auf 1 % der Breite des Ansichtsfensters. Wenn die Wurzelgröße 16px beträgt, ist das Minimum 24px, das Maximum 40px und der bevorzugte Wert 16px plus 2 % der Bildschirmbreite.

Wenn Sie Fließtext ausschließlich von der Bildschirmbreite abhängig machen, kann er auf schmalen Bildschirmen oder in vergrößerten Ansichten zu klein werden. Bei der Verwendung von fließenden Größen in Überschriften ist ein guter Ausgangspunkt, ein unteres lesbares Limit festzulegen und den Fließtext auf einer rem-basierten Größe zu belassen. Nur weil Sie rem gemischt haben, garantiert dies nicht automatisch Barrierefreiheit bei Vergrößerung, daher müssen Sie auch die tatsächliche Browser-Vergrößerung und die Standardeinstellungen der Schriftart überprüfen. Sie können die Rolle jedes Arguments in MDNs clamp()-Definition und der Erklärung zur Barrierefreiheit überprüfen.

Führen Sie das Beispiel für die Fluidkarte und das Bild aus

Speichern Sie den folgenden Code als fluid-size.html in UTF-8 und öffnen Sie ihn in Ihrem Browser. Das Bild sind SVG-Daten, die in der Datei enthalten sind, daher ist es nicht notwendig, ein separates Bild oder eine externe Bibliothek herunterzuladen. Vergleichen Sie die Breite des Bodys, die Anzahl der Karten-Spalten und die Titelgröße auf einem großen Bildschirm und einem schmalen Bildschirm von etwa 390px. Wenn Sie mehrere Karten flexibel platzieren möchten, sehen Sie sich CSS Grid: repeat, auto-fit, auto-fill und Areas an, um zu erfahren, wie man die minimale Breite für die Spalten festlegt.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fluid-size.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 48rem); margin-inline: auto; padding: 1rem; }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.3; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.card { min-width: 0; padding: 1rem; background: #e8f3fa; overflow-wrap: anywhere; }
.card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.token { font-family: monospace; }
</style>
</head>
<body>
<main class="content">
<h1>Size elements to fit the screen and content</h1>
<p>The content is at most 48rem wide and shrinks to fit its parent on smaller screens.</p>
<div class="cards">
  <article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice drawing with upper and lower bands and center circle"><h2>card with picture</h2><p>The image stays within the card width and preserves its original aspect ratio.</p></article>
  <article class="card"><h2>A heading and description that wrap onto several lines</h2><p>Without a fixed height, the card grows as its text gets longer.</p></article>
  <article class="card"><h2>Long identifier</h2><p class="token">ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p></article>
</div></main>
</body>
</html>

Die minmax(min(100%, 14rem), 1fr) der Karte verwendet eine Standard-Mindestbreite von 14rem, aber wenn das übergeordnete Element schmaler ist, entspricht das Minimum 100% der verfügbaren Elternbreite. auto-fit ermittelt zunächst die passenden Wiederholungs-Tracks und lässt nach der Platzierung leere Tracks zusammenfallen. Die belegten 1fr-Tracks teilen den verbleibenden Platz. Durch das Padding innerhalb der Karte ist die tatsächliche Breite von Text und Bildern kleiner als die Außenbreite der Karte. Beurteilen Sie die Anzahl der Spalten nicht nach dem Namen des Geräts, sondern nach der für das übergeordnete Element verfügbaren Breite.

min-width: 0 entfernt eine Mindestgrößenbeschränkung, die verhindern könnte, dass die Karte schrumpft. overflow-wrap: anywhere fügt bei Bedarf Umbrüche innerhalb einer langen URL oder eines Bezeichners ein. Sie haben unterschiedliche Funktionen: Das Zulassen des Schrumpfens der Box bewirkt nicht automatisch, dass ihr Text umgebrochen wird. Umbrüche ändern die Darstellung, nicht den kopierten Zeichenfolgenwert.

Testen Sie jeweils nur eine Größenänderung

1. Reduzieren Sie den Bildschirm auf 390px. Der Text sollte innerhalb des Bildschirms passen, die Karte sollte vertikal verlaufen, und die Streifen über und unter dem Bild sowie der Kreis in der Mitte sollten alle sichtbar sein.
2. Ändern Sie nur die Breite von .content auf 48rem. Nachdem Sie überprüft haben, warum der Text auf dem schmalen Bildschirm überläuft, setzen Sie ihn auf min(100%, 48rem) zurück.
3. Ändern Sie nur den Maximalwert des Titels auf 3rem und sehen Sie den Unterschied auf einem größeren Bildschirm. Ein Unterschied entsteht erst, wenn der bevorzugte Wert die bisherige Obergrenze von 2.5rem überschreitet. Auf schmalen Bildschirmen ändert die höhere Obergrenze nichts. Stellen Sie anschließend 2.5rem wieder her.
4. Entfernen Sie nur overflow-wrap: anywhere von .card. Prüfen Sie, ob lange Bezeichner über die Karte hinausragen, und stellen Sie die Deklaration anschließend wieder her. Nachfolgende Experimente zur Änderung der Wurzelgröße und der Browservergrößerung werden unter separaten Bedingungen protokolliert.

Bevor Sie overflow-x: hidden, das Überlauf ausblendet, auf der gesamten Seite einfügen, überprüfen Sie Breite, Außenabstände, Mindestbreite und die Zeichenfolge. Wenn Sie es aus der Ansicht ausblenden, können Inhalte oder Bedienelemente abgeschnitten werden, ohne die Ursache zu beheben. Für die Grundprinzipien der reaktionsfähigen Konfiguration können Sie sich auch an MDNs Leitfaden für responsives Design wenden.