CSS-Kurs / Media Queries und inhaltsabhängige Breakpoints

Media Queries wenden CSS an, wenn bestimmte Umgebungsbedingungen erfüllt sind, wie beispielsweise ein Schwellenwert der Viewport-Breite. Wählen Sie einen Breakpoint, bei dem der tatsächliche Inhalt ein anderes Layout benötigt, und berücksichtigen Sie sowohl die Breite der Komponenten als auch den umgebenden Abstand.

Kombinieren Sie Basis- und bedingte Stile

Regeln außerhalb von Media Queries liefern die Baseline. Wenn eine Bedingung zutrifft, treten ihre Deklarationen in die Kaskade ein; sie löschen keine nicht verwandten Baseline-Deklarationen. Bevor Sie einen Breakpoint hinzufügen, prüfen Sie, ob flüssige Größen die Inhalte natürlich aufnehmen können. Siehe Fließende Layouts mit min(), max-width und clamp().

.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Hier haben wir denselben Selektor verwendet und zuerst den kleinen Zweig platziert, sodass die nachfolgende bedingte Deklaration diese Eigenschaft überschreibt. Man sollte nicht verallgemeinern, dass „der untenstehende Code immer gewinnt“ in allen Fällen zutrifft. Vergleichen Sie die Deklarationsreihenfolge, wenn Wichtigkeit, Priorität der Kaskadenschicht und des Selektors usw. gleich sind. Falls die Bedingungen zutreffen, aber keine Änderung erfolgt, prüfen Sie, ob in anderen Regeln in den Entwickler-Tools ein Durchstreichen erscheint.

Berechnen Sie die Breakpoints anhand der Kartenanforderungen

Überprüfen Sie zunächst, ab welcher Breite eine einzelne Karte schwer lesbar wird. In der Praxis wird das minimale Breitenziel einschließlich des Rahmens und der Padding der Karte auf 16rem festgelegt. Dies ist kein Standardwert, der für jede Website geeignet ist, sondern eine Designanforderung für dieses Beispiel. Sie sollten versuchen, einen langen Titel und eine lange Beschreibung einzufügen und die Breite entsprechend der tatsächlichen Schriftart und dem Inhalt anzupassen.

Die erforderliche Inhaltsbreite für zwei Spalten beträgt 33rem, was 16rem×2 plus 1rem Spaltenabstand entspricht. Wenn das linke und rechte Padding des Textes jeweils 1rem beträgt, ist die erforderliche Ansichtsfensterbreite 35rem. Daher werden wir in den Beispielen in dieser Lektion beide Spalten bei 35rem starten. Drei Spalten sind 16rem×3 + Abstand 1rem×2 + linkes und rechtes Padding 2rem. 52rem werden benötigt.

Der Grund, warum wir den Raum innerhalb der Karte nicht wieder in die Tabellenberechnung einbeziehen, liegt darin, dass wir ihn bereits in unser Ziel für die Mindestbreite von 16rem aufgenommen haben. Umgekehrt, wenn der Hauptbereich die Breite von der Seitenleiste trennt, ist es schwierig, den Kartenraum nur mit dem Ansichtsfenster zu garantieren. In diesem Fall sollten Sie die äußeren Layoutbedingungen neu berechnen oder das interne Layout des Teils unter Verwendung der CSS Containerabfragen für wiederverwendbare Komponenten bestimmen.

Verstehen Sie rem und inklusive Grenzen

min-width ist gültig, wenn es gleich oder größer als die angegebene Breite ist, und max-width ist gültig, wenn es gleich oder kleiner als die angegebene Breite ist. Wenn Ihre anfängliche Schriftgröße 16px beträgt, sind 35rem 560px und 52rem 832px. Wir beschreiben rem nicht immer als festen px-Wert, da der umgerechnete Wert je nach den anfänglichen Schriftgrößeneinstellungen des Benutzers oder des Browsers variieren kann.

Die relative Länge in Media Queries verwendet den Anfangswert, nicht die durch das Seiten-CSS überschriebene Schriftgröße. Zum Beispiel bewirkt das Hinzufügen von html { font-size: 32px; } zu CSS nicht automatisch, dass die 35rem-Bedingung einer 1120px-Bedingung entspricht. Es muss ein Unterschied zwischen Änderungen der Rem-Größe des Textes und Änderungen der Media-Bedingungen gemacht werden. Dieses Prinzip wird in der units-basierten CSS Media Query-Spezifikation beschrieben.

/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }

Wie oben gezeigt, überschneiden sich min- und max-Bedingungen mit demselben Grenzwert an den passenden Punkten. Sie können dieses Problem verringern, indem Sie Standard- und Mindestbreitenstufen schrittweise hinzufügen. Die Zwei-Spalten- und Drei-Spalten-Bedingungen gelten ebenfalls auf großen Bildschirmen, aber die Verwendung desselben Selektors und derselben Eigenschaften wie im vollständigen Beispiel und das anschließende Schreiben der Drei-Spalten-Regel erzeugt die beabsichtigte Stufung.

Von einer Spalte auf zwei und drei Spalten erweitern

Speichern Sie es als eine media-breakpoint.html-Datei und öffnen Sie sie in Ihrem Browser. Es werden keine externen Dateien benötigt. Das Beispiel enthält drei Karten mit Überschriften, Links und einer langen Kennung, um Umbruch und Lesbarkeit zu prüfen.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.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%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>

Das Ausschalten der Mindestbreite für minmax(0, 1fr) und Karten verhindert, dass die Spalten bei langen Inhalten aus dem Bildschirm herauswachsen. Der Zweck dieses Beispiels ist jedoch, die Anzahl der Spalten zu reduzieren, anstatt nur die Buchstaben anzupassen. Bei der maximalen Inhaltsbreite von 70rem breiten sich die Spalten nicht endlos aus, sondern drei Karten teilen den verbleibenden Platz auf.

Unmittelbar um jeden Breakpoint herum testen

1. Vergleichen Sie 559px, 560px und 561px in einer Umgebung mit einer anfänglichen Schriftgröße von 16px. 559px sollte 1 Spalte haben, 560px sollte 2 Spalten haben.
2. Vergleichen Sie 831px, 832px und 833px. 831px sollte 2 Spalten haben, 832px sollte 3 Spalten haben. Stellen Sie sicher, dass die Kartenbreite mindestens 16rem beträgt, selbst wenn Sie die genaue Grenze erreichen.
3. Ändern Sie nur den Breakpoint für zwei Spalten von 35rem auf 30rem. Beobachten Sie bei 480px, ob die Kartenbreite kleiner als das Ziel wird und die Anzahl der Titellinien zunimmt, und stellen Sie sie dann wieder auf 35rem zurück.
4. Bedingungen, die die Standard-Schrifteinstellungen des Browsers erheblich ändern, und Bedingungen, die nur die CSS-html-Schrift ändern, werden aufgezeichnet. Behandeln Sie sie nicht als dasselbe Experiment, sondern überprüfen Sie die Breite und die Kartenplatzierung in jeder Bedingung doppelt.

Media Queries können Orientierung, Eingabefähigkeiten und eine Präferenz für reduzierte Bewegung sowie die Breite testen. Ein schmales Display bedeutet nicht notwendigerweise ein Touch-Gerät, und ein breites Display garantiert keine Maus. Fertigen Sie zuerst das auf der Breite basierende Layout an, und fügen Sie dann andere Bedingungen hinzu, wo die Funktion sie erfordert. Der MDN-Leitfaden zur Verwendung von Media Queries erklärt ihre Syntax und Umgebungsbedingungen.