Responsives Design mit Media Queries

Ohne ein bestimmtes meta-Tag gestalten viele Handys eine Seite so, als wäre der Bildschirm viel breiter (MDN nennt als Beispiel 980 Pixel), und verkleinern sie dann. Eine Media Query für Handys greift dann nie.

Eine Seite, jeder Bildschirm

Responsives Design heißt, eine einzige Seite zu bauen, die sich an jeden Bildschirm anpasst, vom schmalen Handy bis zum breiten Monitor, statt eine eigene mobile Website zu machen. Es beruht auf drei Ideen: ein Layout aus flexiblen statt festen Breiten, Medien, die sich in ihren Containern mitskalieren, und Media Queries, die das Layout an den Stellen anpassen, an denen es nicht mehr funktioniert. Flexbox und Grid erledigen schon einen großen Teil, wie die letzten beiden Einheiten mit umbrechenden Karten und auto-fill-Spalten gezeigt haben.

Das viewport-meta-Tag

Viele Handys stellen Seiten in einem virtuellen Viewport dar, der breiter ist als der Bildschirm, MDN nennt 980 Pixel als Beispiel, und verkleinern dann das Ergebnis, weil ältere Websites für Desktop-Rechner gebaut wurden. Bei einer Seite, die sich anpassen soll, stört das: Eine Media Query, die unter 600 Pixeln greifen soll, läuft nie, weil der Browser den Bildschirm für 980 Pixel breit hält. <meta name="viewport" content="width=device-width"> im head sagt dem Browser, die echte Breite des Geräts zu verwenden, gemessen in CSS-Pixeln. Füg niemals user-scalable=no oder ein niedriges maximum-scale hinzu. MDN warnt, dass gesperrtes Zoomen Menschen mit Sehbehinderung ausschließt, und WCAG 1.4.4 erwartet, dass sich Text auf 200 Prozent vergrößern lässt.

Flexible Breiten und Bilder

Feste Breiten sind die häufigste Ursache für seitliches Scrollen auf dem Handy. Nimm lieber max-width statt width: max-width: 70rem an einem Seiten-Wrapper lässt ihn einen kleinen Bildschirm ausfüllen und auf einem großen nicht weiterwachsen. Bilder behalten standardmäßig ihre natürliche Pixelgröße, ein 1200 Pixel breites Foto ragt also aus einem 390 Pixel breiten Bildschirm heraus. img { max-width: 100%; height: auto; } lässt Bilder auf die Größe ihres Containers schrumpfen und erhält dabei ihre Proportionen. WCAG 1.4.10, Reflow (Umbruch), verlangt, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen funktionieren. Die eigene Seite in einem 320 Pixel breiten Fenster zu prüfen, ist eine gute Gewohnheit.

Media Queries

Eine Media Query umschließt Regeln, die nur gelten, wenn eine Bedingung erfüllt ist. @media (min-width: 600px) { ... } wendet ihre Regeln an, wenn der Viewport mindestens 600 Pixel breit ist. Üblich ist Mobile First: Schreib die Grundstile für einen schmalen Bildschirm, die oft die einfachsten sind (eine Spalte, alles gestapelt), und füg dann min-width-Queries hinzu, die die Dinge neu anordnen, sobald mehr Platz da ist. Wähle Breakpoints dort, wo dein Inhalt anfängt, falsch auszusehen, und rate nicht nach beliebten Gerätegrößen, denn jedes Jahr kommen neue Bildschirmgrößen dazu. Breakpoints in em, etwa 40em, reagieren außerdem, wenn jemand den Text vergrößert.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Was eine Query sonst noch abfragen kann

Media Queries können mehr prüfen als die Breite. Die Merkmale für Vorlieben der Leserschaft stammen aus Media Queries Level 5: (prefers-color-scheme: dark) trifft zu, wenn im Betriebssystem ein dunkles Design gewählt ist, so kannst du automatisch dunkle Farben anbieten. (prefers-reduced-motion: reduce) trifft zu, wenn weniger Bewegung gewünscht ist, oft weil Animationen schwindlig machen. Schalte darin große Bewegungen und Parallax-Effekte ab. (hover: hover) aus Level 4 verrät, ob der Hauptzeiger schweben (hovern) kann, was ein Touchscreen nicht kann. print gestaltet eine Seite für Papier, zum Beispiel indem das Menü versteckt wird. Und schließlich passt clamp() Größen stufenlos ohne Query an: font-size: clamp(1.5rem, 4vw, 2.5rem) wächst mit dem Bildschirm, wird aber nie kleiner als 1.5rem oder größer als 2.5rem.