Im vierten Teil haben wir eine Navigation eingebaut und die Typografie verbessert. Die Seite sieht auf einem großen Bildschirm gut aus – aber auf einem Smartphone? Da versagt ein fixes Layout schnell. Im fünften und letzten Teil dieser Reihe machen wir die Website responsive: Sie passt sich jetzt automatisch an die Bildschirmbreite an.
Das HTML bleibt vollständig unverändert. Wir ergänzen nur CSS.
Die fertige Website – Beispiel 5Was bedeutet „responsive"?
Eine responsive Website passt ihr Layout an die Breite des Geräts an, auf dem sie geöffnet wird. Auf einem großen Desktop-Bildschirm zeigt sie zwei Spalten, auf einem Tablet eventuell eine, auf einem Smartphone statt einer horizontalen Navigation eine vertikale – was auch immer sinnvoll ist.
Das Werkzeug dafür heißt Media Query. Eine Media Query ist ein CSS-Block, der nur dann gilt, wenn eine bestimmte Bedingung erfüllt ist – zum Beispiel, wenn das Browserfenster schmaler als 900px ist:
@media (max-width: 900px) {
/* Diese Regeln gelten nur bei max. 900px Breite */
}Alles innerhalb der geschweiften Klammern der Media Query überschreibt die normalen CSS-Regeln – aber nur so lange, wie die Bedingung zutrifft. Wird das Fenster wieder breiter, greifen automatisch die ursprünglichen Regeln.
Warum max-width in Pixeln?
In unserer CSS-Datei haben wir html { font-size: 62.5%; } gesetzt, damit wir bequem mit rem-Werten rechnen können. Das gilt für alle normalen Eigenschaften – aber nicht für Media Queries. Media Queries beziehen sich immer auf die echte Pixelbreite des Browserfensters, nicht auf die definierte Schriftgröße. Ein max-width: 90rem in einer Media Query würde sich auf die Standard-Browserschriftgröße von 16px beziehen und unerwartete Werte liefern. Deshalb schreiben wir in Media Queries immer px.
Haltepunkte: Wo greift was?
Wir definieren zwei Haltepunkte – sogenannte Breakpoints. Das sind die Breiten, bei denen das Layout umschaltet:
max-width: 900px deckt Tablets und kleinere Laptops ab. max-width: 500px gilt für Smartphones. Auf allem, was breiter als 900px ist, gelten die normalen Regeln ohne Media Query.
Breakpoint 1: Tablets – max-width: 900px
Auf Tablets wird das zweispaltige Layout einspaltig. Die Sidebar wandert unter den Hauptinhalt. Schriftgrößen und Abstände werden leicht reduziert. Das Card-Grid darf noch zweispaltig bleiben – auf Tablets ist noch genug Platz dafür.
@media (max-width: 900px) {
html {
font-size: 58%;
}
.wrapper {
width: 92%;
}
.layout {
grid-template-columns: 1fr;
}
.sidebar {
margin-top: 0;
}
.card-grid {
grid-template-columns: 1fr 1fr;
}
.nav-list {
gap: 0.8rem;
padding: 1rem;
}
.nav-list a {
padding: 0.9rem 1.2rem;
}
.box {
padding: 1.8rem;
}
h1 {
font-size: 3.2rem;
}
h2 {
font-size: 2.4rem;
}
h3 {
font-size: 1.8rem;
}
}
Die entscheidende Zeile ist grid-template-columns: 1fr beim .layout. Bisher stand dort 2fr 1fr – zwei Spalten, Hauptbereich doppelt so breit wie die Sidebar. Mit 1fr gibt es nur noch eine Spalte. Das Grid stellt die beiden Bereiche dann automatisch untereinander, die Sidebar landet darunter.
font-size: 58% auf dem html-Element reduziert die Basisgröße leicht. Da alle unsere Maßangaben in rem geschrieben sind, schrumpfen dadurch automatisch alle Schriften, Abstände und Rundungen proportional mit – ohne dass wir jede Eigenschaft einzeln ändern müssten.
Breakpoint 2: Smartphones – max-width: 500px
Auf Smartphones braucht die Navigation mehr Platz als horizontal verfügbar ist. Deshalb wird die flex-direction der Linkliste auf column umgestellt: Die Navigationspunkte erscheinen jetzt untereinander. Das Card-Grid wird einspaltig. Alles bekommt etwas weniger Innenabstand, damit die Seite nicht zu eng wirkt.
@media (max-width: 500px) {
html {
font-size: 56%;
}
.wrapper {
width: 94%;
}
.header {
padding: 2.4rem 1.6rem;
}
.main-nav {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.nav-list {
flex-direction: column;
gap: 0.8rem;
padding: 1rem;
}
.nav-list a {
display: block;
padding: 1rem 1.2rem;
}
.layout {
gap: 1.5rem;
}
.box {
padding: 1.6rem;
margin-bottom: 1.5rem;
}
.content-block {
padding: 1.4rem;
}
.card-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.card-content {
padding: 1.4rem;
}
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.7rem;
}
body {
line-height: 1.6;
}
}
flex-direction: column ist der Schalter, der die Navigation umklappt. Standardmäßig ordnet Flexbox Elemente in einer Reihe nebeneinander an (row). Mit column werden sie stattdessen untereinander gestapelt. Die Links bekommen zusätzlich display: block, damit sie die volle Breite der Navigation einnehmen und eine großzügige Klickfläche bieten.
Das line-height auf dem body wird von 1.7 auf 1.6 reduziert. Auf kleinen Bildschirmen ist ein etwas kompakterer Zeilenabstand oft angenehmer – der Text wirkt weniger auseinandergerissen.
Das vollständige responsive CSS
Beide Media Queries kommen ans Ende der CSS-Datei, nach allen normalen Regeln. Die Reihenfolge ist wichtig: Was später im CSS steht, überschreibt frühere Regeln bei gleicher Spezifität. So stehen die normalen Regeln zuerst, die Anpassungen für kleinere Bildschirme danach:
/* Responsive: Tablets und kleinere Laptops */
@media (max-width: 900px) {
html {
font-size: 58%;
}
.wrapper {
width: 92%;
}
.layout {
grid-template-columns: 1fr;
}
.sidebar {
margin-top: 0;
}
.card-grid {
grid-template-columns: 1fr 1fr;
}
.nav-list {
gap: 0.8rem;
padding: 1rem;
}
.nav-list a {
padding: 0.9rem 1.2rem;
}
.box {
padding: 1.8rem;
}
h1 {
font-size: 3.2rem;
}
h2 {
font-size: 2.4rem;
}
h3 {
font-size: 1.8rem;
}
}
/* Responsive: Smartphones */
@media (max-width: 500px) {
html {
font-size: 56%;
}
.wrapper {
width: 94%;
}
.header {
padding: 2.4rem 1.6rem;
}
.main-nav {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.nav-list {
flex-direction: column;
gap: 0.8rem;
padding: 1rem;
}
.nav-list a {
display: block;
padding: 1rem 1.2rem;
}
.layout {
gap: 1.5rem;
}
.box {
padding: 1.6rem;
margin-bottom: 1.5rem;
}
.content-block {
padding: 1.4rem;
}
.card-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.card-content {
padding: 1.4rem;
}
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.7rem;
}
body {
line-height: 1.6;
}
}Das viewport-Meta-Tag
Damit Media Queries auf Smartphones überhaupt funktionieren, muss im <head> ein bestimmtes Meta-Tag stehen – das haben wir von Anfang an eingebaut:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ohne dieses Tag würde ein Smartphone die Seite verkleinert darstellen, als wäre sie ein Desktop – Media Queries würden dann nie auslösen, weil der Browser intern mit einer viel größeren Breite rechnet. width=device-width sagt dem Browser: Nutze die echte Gerätebreite als Maßstab. initial-scale=1.0 verhindert, dass die Seite beim ersten Laden automatisch rein- oder rausgezoomt wird.
Überschriften flüssiger skalieren
Wer Schriftgrößen und Abstände noch flexibler gestalten möchte, kann die fixen rem-Werte in den Media Queries durch einen einzigen clamp()-Wert ersetzen. Damit skalieren Größen flüssig mit der Bildschirmbreite – ganz ohne Breakpoints.
Was wir gelernt haben
Nach fünf Teilen ist die Beispielseite vollständig. Sie hat ein stabiles Layout mit Hauptbereich und Sidebar, echte Inhaltskomponenten mit Cards und Links, eine animierte Navigation und eine durchdachte Typografie – und passt sich jetzt automatisch an Tablets und Smartphones an. Das gesamte CSS ist schrittweise gewachsen, ohne dass frühere Regeln gebrochen wurden.
Das ist kein fertiges Webprojekt, aber ein solides Fundament. Wer versteht, wie diese fünf Schritte zusammenhängen, kann darauf aufbauen.