Was sind Media Queries?
Media Queries ist ein CSS-Feature, das es ermöglicht, verschiedene Stile für unterschiedliche Geräte, Bildschirmgrößen oder Bildschirmauflösungen zu definieren. Sie ermöglichen es, eine Webseite flexibel und anpassungsfähig zu gestalten, ohne dass man mehrere Versionen der Webseite erstellen muss.
Warum sind Media Queries wichtig?
Mit der zunehmenden Nutzung von mobilen Geräten, Tablets und Desktops mit unterschiedlichen Bildschirmgrößen ist es entscheidend, dass Websites auf allen Geräten gut aussehen und benutzerfreundlich sind. Media Queries machen genau das möglich, indem sie spezifische CSS-Regeln nur dann anwenden, wenn bestimmte Bedingungen erfüllt sind (z. B. Bildschirmbreite, -höhe, Orientierung oder Auflösung).
Erlebe, wie sich das Design ändert:
Verändere die Größe des Fensters, um die verschiedenen Layouts zu entdecken!
Wie funktionieren Media Queries?
Media Queries arbeiten mit Bedingungen, die auf Eigenschaften des Geräts oder des Ansichtsfensters (Viewport) basieren. Diese Bedingungen können Folgendes umfassen:
- Breite und Höhe des Viewports (z. B. für mobile Geräte)
- Orientierung (Hoch- oder Querformat)
- Auflösung (z. B. für Retina-Displays)
Beispiel einer Media Query für verschiedene Gerätegrößen:
