Zuerst das Smartphone

Websites werden auf Smartphones, Tablets und Computern angesehen, und die Bildschirme sind unterschiedlich breit: Der Bildschirm eines Smartphones ist etwa 375 Pixel breit, der eines Tablets etwa 768 und der eines Computers 1280 oder mehr. Eine Seite, die ihr Layout an die Breite des Bildschirms anpasst, heißt responsiv. In dieser Lektion machst du die Startseite des Tierheims responsiv.

Die ganze Startseite haben wir aus dem zusammengesetzt, was du bisher gelernt hast: eine Kopfzeile mit der Navigation, den Hero mit der Überschrift, die Karten der Katzen, die Schritte der Adoption und eine Fußzeile. Sie ist aber nur für einen Computerbildschirm gemacht. Auf einem Smartphone sind die Karten und die Schritte gequetscht, und die Navigation passt nicht hinein.

Um das zu sehen, musst du die Breite der Vorschau ändern. Auf einem Computer nimmt die Vorschau etwa ein Drittel des Fensters ein, auf den meisten Laptops ist sie also schmaler als ein Tablet. Dafür gibt es die Leiste über der Vorschau, die Vorschaubreite. Du hast sie schon ein paar Mal benutzt; in dieser Lektion brauchst du sie ständig:

• Einpassen zeigt die Seite in der eigenen Breite der Vorschau (die Zahl in Klammern).
• 375 px zeigt sie so breit wie den Bildschirm eines Smartphones, 768 px so breit wie den eines Tablets und 1280 px so breit wie den eines Computers.

Bei 768 oder 1280 px wird die Seite in dieser Breite aufgebaut und dann verkleinert, damit sie in die Vorschau passt. Alles wird kleiner, aber das Layout ist genau das, was dieser Bildschirm zeigen würde. Probiere alle vier Buttons aus und sieh dir die Seite in jeder Breite an.

In CSS schreibt man Stile, die nur für manche Breiten gelten sollen, in eine Media Query: die @media-Regel, die im CSS-Kurs nicht mehr drankam. Die Regeln darin gelten nur, wenn die Bedingung in Klammern wahr ist, hier, wenn die Seite mindestens 48rem (768 px) breit ist:

@media (width >= 48rem) {
	h1 {
		font-size: 3.75rem;
	}
}

(In älterem Code siehst du dieselbe Bedingung als (min-width: 48rem) geschrieben.)

In Tailwind schreibst du Media Queries nicht selbst. Du setzt ein Präfix vor eine Klasse, genau wie hover: in der vorigen Lektion. Das Präfix md: (von medium) wendet die Klasse erst ab 768 px an. Auch das ist eine Variante, sie hängt nur nicht von einem Zustand ab, sondern von der Breite des Bildschirms. So sieht, leicht vereinfacht, das CSS aus, das Tailwind für md:text-6xl erzeugt:

@media (width >= 48rem) {
	.md\:text-6xl {
		font-size: 3.75rem; /* 60 px */
		line-height: 1;
	}
}

Der Backslash in .md\:text-6xl steht aus demselben Grund wie in .hover\:bg-orange-600 in der vorigen Lektion: Der Doppelpunkt gehört zum Klassennamen.

Eine Klasse ohne Präfix gilt in jeder Breite. Darum macht man Seiten mit Tailwind Mobile First: Du gestaltest die Seite zuerst für ein Smartphone, mit Klassen ohne Präfix, und fügst dann Klassen mit Präfix hinzu für das, was sich auf breiteren Bildschirmen ändern soll. Zum Beispiel ist text-4xl md:text-6xl eine Überschrift mit 36 Pixeln, die auf ein Smartphone passt, und ab 768 px hat sie 60 Pixel.

Ein häufiger Fehler: md: heißt nicht „nur auf Tablets“. Es heißt „ab 768 px aufwärts“, gilt also auch auf Computern. Und für Smartphones gibt es kein Präfix: Was für Smartphones gedacht ist, steht ohne Präfix.

Eine Sache braucht noch jede responsive Seite. Smartphone-Browser rechnen mit Seiten, die für Computer gemacht sind, und bauen eine Seite so auf, als wäre der Bildschirm etwa 980 px breit, und verkleinern sie dann, damit sie hineinpasst. Der Text ist dann winzig, und die md:-Klassen gelten sogar auf einem Smartphone. Diese Zeile im head sagt dem Browser, dass die Seite für jede Breite bereit ist: Er soll sie so breit aufbauen, wie der Bildschirm wirklich ist (width=device-width), und weder hinein- noch herauszoomen (initial-scale=1):

<meta name="viewport" content="width=device-width, initial-scale=1">

Der Viewport ist der Teil des Browserfensters, in dem die Seite angezeigt wird. Die Vorschau ist kein Smartphone, du siehst dort also keinen Unterschied, aber auf einem echten Smartphone kommt eine Seite ohne diese Zeile nicht aus.