Media Queries

Bei „responsiv“ denkt man zuerst an Media Queries. Hier kommen sie trotzdem erst in der zweiten Lektion, weil max-width, flex-wrap und auto-fit das meiste schon ohne sie erledigen.

01 / 04Die Schreibweise

@media (min-width: 48rem) { ... }

In den geschweiften Klammern stehen ganz normale Regeln. Sie gelten, sobald die Bedingung erfüllt ist, und sonst werden sie ignoriert. Die Media Query selbst wählt nichts aus. Sie ist eine Klammer um Regeln herum. Die Breite in der Bedingung, hier 48rem, heißt Breakpoint.

Daneben gibt es die neuere Bereichssyntax. Sie liest sich wie das, was gemeint ist.

@media (width >= 48rem) { ... }

Beide tun dasselbe. Die Bereichssyntax kann zusätzlich @media (48rem <= width <= 64rem), und dafür brauchte man vorher zwei Bedingungen. Alle großen Browser verstehen sie seit März 2023, Safari als letzter mit Version 16.4.

Verknüpft wird mit drei Mitteln.

• and verlangt beides, etwa @media (min-width: 48rem) and (orientation: landscape).
• Ein Komma ist ein Oder, etwa @media print, (min-width: 48rem).
• not kehrt um, etwa @media not (hover: hover).

02 / 04Von klein nach groß

<div class="inhalt">
  <h2>Projekte</h2>
  <div class="projekte">
    <article class="projekt">Tipptrainer</article>
    <article class="projekt">Referenz</article>
    <article class="projekt">Newsletter</article>
  </div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background-color: #f4f4f5;
}

/* Ohne Bedingung: gilt immer, also auch hier. */
.inhalt {
  padding: 16px;
}

.projekte {
  display: grid;
  gap: 16px;
}

.projekt {
  padding: 24px;
  border-radius: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* 48rem sind bei Standardschrift 768px. So schmal,
   wie die Seite in der Spalte steht, greifen diese
   Regeln also nicht. Im Vollbild mit Laptop in der
   Viewport-Leiste greifen sie. */
@media (min-width: 48rem) {
  .inhalt {
    padding: 32px;
  }

  .projekte {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
  }
}

Im Beispiel steht erst die eine Hälfte, das Layout ohne Bedingung mit einer Spalte und 16px Innenabstand. Die andere Hälfte siehst du im Vollbild, wenn in der Viewport-Leiste statt Handy Laptop gewählt ist. Dieselbe Datei, ein anderes Bild, und im Stylesheet hat sich nichts geändert.

Mit eingeschaltetem Inspector siehst du den Umschaltpunkt als Zahlen. Auf Handybreite steht am Inhaltsbereich padding: 16px und am Raster grid-template-columns: 368px, eine einzige Spur. Auf Laptopbreite steht dort padding: 32px, und die Karten messen je rund 389, es sind also drei. Im Stylesheet stehen dagegen 16px, 32px und repeat(3, 1fr), und im Streifen steht das Ergebnis für diese Breite.

Auf Handybreite greift die Media Query nicht, dort gilt nur, was ohne Bedingung dasteht. Auf Laptopbreite kommt sie dazu und legt drei Spalten und mehr Luft obendrauf.

Die Media Query nimmt nichts zurück, sie ergänzt. So sieht Mobile First aus 12.1 in der Praxis aus. Was ohne Bedingung dasteht, gilt auf jeder Breite, und ein Fehler in der Media Query kostet die Verbesserung, nicht die Seite.

Deshalb ist min-width die Standardrichtung, und deshalb mischt man besser nicht. Mit min-width und max-width durcheinander entstehen Bereiche, die sich überlappen, und dann suchst du, welche Regel gerade gewinnt. Ich entscheide mich für eine Richtung und bleibe dabei.

03 / 04Woran ein Breakpoint hängt

<p class="titel">Breakpoints nach Gerätenamen: 768 und 1024</p>
<div class="projekte geraet">
  <article class="karte">Ein Projekt mit einem etwas längeren Titel</article>
  <article class="karte">Noch eines</article>
  <article class="karte">Und ein drittes</article>
</div>

<p class="titel">Breakpoint dort, wo es eng wird</p>
<div class="projekte inhalt">
  <article class="karte">Ein Projekt mit einem etwas längeren Titel</article>
  <article class="karte">Noch eines</article>
  <article class="karte">Und ein drittes</article>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background-color: #f4f4f5;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.projekte {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.karte {
  padding: 16px;
  border-radius: 12px;
  background-color: #ffffff;
}

/* Der Breakpoint kommt aus einer Tabelle mit
   Gerätegrößen. Auf 800px sind drei Spalten schon
   zu eng, aber 1024 ist noch nicht erreicht. */
@media (min-width: 768px) {
  .geraet {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Der Breakpoint kommt aus dem Layout: unter 62rem
   wird es eng, also erst darüber drei Spalten. Die
   Zahl hat kein Gerät, sie hat einen Grund. */
@media (min-width: 62rem) {
  .inhalt {
    grid-template-columns: repeat(3, 1fr);
  }
}

Verbreitet ist es, Breakpoints aus einer Tabelle mit Gerätegrößen abzuschreiben, 768px für Tablets, 1024px für Laptops.

Was daran nicht stimmt, siehst du im Vollbild. Die Seite steht dort von allein auf den 800 Pixeln, für die das Beispiel gebaut ist. Auf 800px sind drei Spalten für diesen Inhalt schon zu eng. Die 1024 ist aber noch nicht erreicht, also bleibt es eng. Die Zahl hat mit deinem Layout nichts zu tun. Sie kommt aus einer Geräteliste, die in zwei Jahren anders aussieht.

Nachgemessen ist eine Karte oben 248 × 80 groß, unten 768 × 56. Die 24 Pixel Unterschied in der Höhe sind eine Textzeile, also der Umbruch, den die enge Spalte erzwingt. Das ist schon der ganze Befund. Der obere Block ist seit 768 Pixeln dreispaltig und bleibt es. Der untere wartet bis 62rem und ist bei 800 noch eine Spalte.

Besser ist es, das Fenster langsam schmaler zu ziehen, bis das Layout unschön wird. Dort steht die Zahl. So ein Breakpoint hat keinen Gerätenamen, dafür hat er einen Grund.

Du brauchst also auch nicht drei Breakpoints, nur weil es drei Gerätekategorien gibt. Manche Layouts brauchen einen, manche vier, und wie viele es werden, ergibt sich aus dem Inhalt.

04 / 04Einheiten und der vergessene Fall

In Media Queries nehme ich rem und nicht px, wegen der Browsereinstellung. Wer die Standardschriftgröße hochsetzt, weil er schlecht sieht, verschiebt damit auch die rem-Breakpoints, und zwar nach rechts. 48rem liegen bei 16px auf 768px und bei 20px auf 960px. Die Seite bleibt dann länger bei der einspaltigen Fassung. Das ist gewünscht, denn mehr Text braucht mehr Platz. Mit px passiert nichts, und der größere Text quetscht sich weiter durch dasselbe enge Raster.

48rem sind bei Standardschrift 768px. Üblich sind 48rem, 64rem und 80rem, die bessere Zahl kommt aber aus dem Layout.

Leicht vergessen wird @media print. Mit ein paar Zeilen darin wird aus deiner Seite ein brauchbarer Ausdruck. Navigation und Fußzeile ausblenden, die Schrift auf Schwarz setzen, fertig.

In der Aufgabe steht die schmale Fassung des Seitenlayouts schon, die breite fehlt noch.