Etappe 1 – Grundlagen · Lektion 11 von 11 · Lernziel: Die Webseite für Smartphones und große Bildschirme optimieren.
Voraussetzung: Grundlagen aus Lektion 10; arbeite im selben Projekt modellbau-webseite.
Was bedeutet responsive?
Nicht jeder Besucher besitzt einen großen Monitor. Responsive Design passt Abstände, Navigation, Bilder und Spaltenzahl an die verfügbare Bildschirmbreite an. Eine gute Seite darf auf schmalen Bildschirmen weder horizontal scrollen noch winzigen Text anzeigen.
Test im Browser
Starte npm run dev und öffne die Projekte-Seite. Rufe die Entwicklerwerkzeuge des Browsers auf (oft F12). Aktiviere dort die Geräte- beziehungsweise responsive Ansicht. Teste beispielsweise 375, 768 und 1280 CSS-Pixel Breite.
Das Viewport-Meta-Tag
Jede HTML-Seite sollte für mobile Browser im <head> dieses Element enthalten:
<meta name="viewport" content="width=device-width, initial-scale=1" />Unsere Seiten haben es bereits. Ohne diesen Eintrag kann die Mobilansicht unerwartet skaliert wirken.
Mobile Anpassungen durch Media Queries
Ergänze in src/pages/projekte.astro ganz unten im bestehenden <style>-Block:
@media (max-width: 600px) {
nav { flex-direction: column; gap: 10px; }
main { padding: 14px; }
h1 { font-size: 1.7rem; }
.karte { padding: 12px; }
}Diese Regeln gelten nur, wenn die Browseransicht höchstens 600 CSS-Pixel breit ist. Das Grid aus Lektion 10 passt seine Spalten ohnehin automatisch an; die Media Query verbessert zusätzlich Navigation und Abstände.
Bilder und Lesbarkeit
Bilder sollten nicht über ihre Container hinausragen. Setze max-width: 100% oder, wie in der Projektkarten-Ansicht, width: 100%. Achte auf ausreichend große Schriften, deutliche Linkfarben und genügend Abstand zwischen anklickbaren Elementen.
Abschluss-Check
- Startseite, Projekte und Kontaktseite lassen sich aufrufen.
- Alle Links im Menü funktionieren.
- Texte sind auf schmalen Bildschirmen ohne Zoom lesbar.
- Bilder verzerren nicht und ragen nicht über den Rand.
- Es gibt möglichst keinen unnötigen horizontalen Scrollbalken.
- Bild-Alternativtexte und sinnvolle Überschriften sind vorhanden.
Übung
Teste bei 375, 768 und 1280 Pixeln die Projektkarten. Passe die Menüabstände für schmale Displays an. Verändere testweise den Grenzwert 600px zu 700px.
Lösung: Bei 700px wechselt die Navigation bereits auf etwas breiteren Geräten in die vertikale Anordnung.
Wie geht es weiter?
Etappe 1 ist abgeschlossen! Du hast eine mehrseitige Website mit Astro gebaut. In Etappe 2 lernst du Komponenten, Layouts, Props und Markdown kennen. Damit vermeidest du die hier noch sichtbaren Wiederholungen von HTML und CSS und kannst größere Projekte besser pflegen.
Weitere Informationen: Offizielle Astro-Dokumentation.