Responsives Layout mit Viewport und Media Queries

Responsives Webdesign heißt, dass sich eine Webseite an die Breite des Bildschirms anpasst: Dieselbe Seite passt auf ein Smartphone, ein Tablet und einen Laptop. Wer das Viewport-Tag und Media Queries versteht, baut etwa einen Mensaplan, der auf dem Telefon lesbar ist, ohne dass jemand zoomen muss.

Dieses Modul behandelt mobile Web-Apps, also Seiten und Skripte im Browser. Werkzeuge für native Apps, etwa ein Emulator oder ein App-Store, gehören nicht dazu.

Ein Telefon kennt nicht von sich aus die Absicht Ihrer Seite. Fehlt eine Angabe, zeichnet es die Seite so, als wäre der Bildschirm viel breiter, oft rund 980 Pixel. Dann verkleinert es alles.

Das Ergebnis kennen Sie: winzige Schrift, die Sie mit zwei Fingern aufziehen müssen. Ein einziges meta-Tag im Kopf der Seite löst das.

<meta name="viewport" content="width=device-width, initial-scale=1">
<h1>Mensaplan</h1>
<p>Heute: Gemüsecurry mit Reis, 3,20 Euro.</p>

width=device-width sagt: Zeichne die Seite so breit wie der Bildschirm. initial-scale=1 sagt: Beginne ohne Vergrößerung.

Beides zusammen ist die Grundlage jedes responsiven Layouts. Ohne diese Zeile greifen Ihre Media Queries auf dem Telefon nicht so, wie Sie es erwarten.

Im Lab liegt eine kleine Web-App im Ordner app. Ein Skript liest ihre Seite und sucht das Viewport-Tag. Die Ausgabe des Skripts ist englisch: found heißt gefunden, MISSING heißt fehlt, content ist der Inhalt des Tags, True heißt wahr.

Öffnen Sie danach den Vorschau-Link des Labs in Ihrem eigenen Browser und machen Sie das Fenster schmal.

docker exec jupyter ls app

docker exec jupyter python3 steps/viewport.py

Eine Media Query ist eine CSS-Regel mit einer Bedingung. @media (min-width: 600px) heißt: Die Regeln darin gelten, wenn der Bildschirm mindestens 600 Pixel breit ist.

Es gibt auch max-width, also höchstens so breit. Eine Query kann auch etwas anderes fragen, etwa prefers-color-scheme: dark, die Vorliebe für einen dunklen Modus. Das ist dann keine Breite.

abfragen = ["(min-width: 600px)", "(min-width: 900px)"]
breite = 700

for abfrage in abfragen:
    # Zahl zwischen dem Doppelpunkt und px herausholen
    zahl = int(abfrage.split(":")[1].replace("px)", "").strip())
    print(abfrage, "gilt" if breite >= zahl else "gilt nicht")
# Ändern Sie breite auf 950 und starten Sie noch einmal.

Das nächste Skript liest die Stylesheet-Datei und listet jede Media Query. Es gibt -> width und die Zahl aus, wenn die Query eine Breite nennt, sonst not a width, a preference, also keine Breite, eine Vorliebe.

Schätzen Sie vorher: Wie viele Queries hat die App, und welche Breiten kommen vor?

docker exec jupyter python3 steps/breakpoints.py

Bei Mobile First schreiben Sie zuerst die Regeln ohne Query. Sie gelten für das Telefon: eine Spalte, volle Breite. Danach fügen Sie mit min-width Regeln für größere Bildschirme hinzu.

Das Gegenteil ist Desktop First mit max-width. Es zwingt das Telefon, viele Regeln wieder zurückzunehmen, und lädt oft mehr als nötig.