Intro

Was ihr nach diesem Kapitel können solltet

Im CSS-Kapitel habt ihr ein Design für eine Bildschirmbreite gebaut. Jetzt geht’s darum, dieselbe Seite auf ganz unterschiedlichen Geräten - vom kleinen Smartphone bis zum großen Desktop-Monitor - sinnvoll aussehen zu lassen.

• Verstehen, warum ein CSS-Pixel nicht dasselbe ist wie ein echtes Bildschirm-Pixel, und wozu der Viewport-Meta-Tag gebraucht wird
• Media Queries einsetzen, um CSS abhängig von der Bildschirmbreite (und anderen Eigenschaften) zu verzweigen - nach dem Mobile-First-Prinzip
• Container Queries einsetzen, wenn eine Komponente auf ihren eigenen verfügbaren Platz reagieren soll, statt auf den ganzen Bildschirm
• Feature Queries (@supports) einsetzen, um auf fehlende Browser-Unterstützung zu reagieren
• Dark Mode anbieten, ganz ohne JavaScript, mit prefers-color-scheme und light-dark()
• Weitere Nutzer*innen-Präferenzen respektieren: prefers-reduced-motion, prefers-contrast & Co.

Responsive Design heißt nicht “eine Handy-Version und eine Desktop-Version”. Es heißt: dieselbe Seite passt sich fließend an, egal welches Gerät, welche Vorlieben, welche Einschränkungen jemand mitbringt.

---

Woher kommt dieses Kapitel?

Hinweis

Media Queries, Container Queries und Dark Mode waren ursprünglich Teil des CSS-Kapitels. Weil das Thema “auf die Umgebung reagieren” so umfangreich ist, hat es jetzt sein eigenes Kapitel bekommen - mit deutlich mehr Tiefe, als vorher Platz war.