Zusammenfassung

• CSS-Pixel sind nicht dasselbe wie echte Bildschirm-Pixel - das Verhältnis heißt Device Pixel Ratio; der Viewport-Meta-Tag ist Voraussetzung für responsives CSS auf dem Handy
• Media Queries (@media): min-width/max-width, Mobile First (erst schmal, dann ergänzen)
• Weitere Media Features: print/screen, orientation, hover/pointer, prefers-reduced-motion, prefers-contrast, forced-colors
• Container Queries (@container): reagieren auf die Breite des Eltern-Containers, nicht des Viewports - ideal für wiederverwendbare Komponenten
• Feature Queries (@supports): CSS abhängig von Browser-Unterstützung verzweigen
• Dark Mode: prefers-color-scheme (Media Query) oder light-dark() (kompakte Funktion), beide ganz ohne JavaScript

Vertiefung

• MDN: Responsive Design
• MDN: Using Media Queries
• web.dev: Learn Responsive Design