Media Queries sind ein wichtiger Bestandteil des Responsive Webdesigns und ermöglichen es, das Layout und die Darstellung einer Website je nach Bildschirmgröße und Gerät des Nutzers anzupassen. Mithilfe von Media Queries können spezifische CSS-Regeln basierend auf bestimmten Eigenschaften des Ausgabegeräts definiert werden, wie zum Beispiel Bildschirmbreite, Auflösung oder Ausrichtung.
Eine Media Query besteht aus einem Medientyp, der definiert, auf welchem Gerät oder Medium die CSS-Regeln angewendet werden sollen (z.B. Screen für Computerbildschirme oder Print für Druckausgaben), sowie aus einer oder mehreren Bedingungen, die bestimmen, wann die CSS-Regeln angewendet werden sollen (z.B. min-width für Bildschirmbreiten ab einer bestimmten Größe).
Ein Beispiel für eine Media Query, die eine Schriftgröße für Bildschirme mit einer Breite von mindestens 768 Pixeln definiert, könnte wie folgt aussehen:
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
Durch die Verwendung von Media Queries können Webdesigner sicherstellen, dass eine Website auf allen Geräten und Bildschirmgrößen gut aussieht und optimal dargestellt wird. Dies ist insbesondere wichtig in Zeiten, in denen immer mehr Nutzer mobile Geräte zum Surfen im Internet verwenden.
