B C D H I L M

Media Queries

Grafik mit Beispielen für CSS Media Queries

Was sind Media Queries?

Media Queries sind ein Teil der Cascading Style Sheets (CSS) und dienen dazu, das Layout einer Webseite oder einer Anwendung an verschiedene Geräte und Bildschirmgrößen anzupassen. Sie ermöglichen es, dass eine Webseite auf einem Desktop-Computer anders dargestellt wird als auf einem Smartphone oder Tablet.

Wofür werden Media Queries verwendet?

Media Queries werden verwendet, um das Responsive Webdesign zu ermöglichen. Mit Hilfe von Media Queries kann der Stil und die Struktur einer Webseite je nach Bildschirmgröße, Auflösung und anderen Eigenschaften des Geräts angepasst werden. So wird sichergestellt, dass die Webseite auf allen Geräten optimal dargestellt wird und eine gute Benutzererfahrung bietet.

Beispiele für Media Queries

Ein Beispiel für die Verwendung von Media Queries ist die Anpassung der Schriftgröße. Auf einem großen Bildschirm kann für Überschriften eine größere Schriftgröße verwendet werden, während auf einem kleinen Bildschirm die Schriftgröße reduziert wird, um den Platz effizienter zu nutzen.

Ein weiteres Beispiel ist die Anpassung der Navigation. Auf einem Desktop-Computer kann die Navigation horizontal angezeigt werden, während auf einem Smartphone die Navigation vertikal angeordnet wird, um den begrenzten Platz auf dem Bildschirm optimal zu nutzen.

Durch die Verwendung von Media Queries können Entwickler sicherstellen, dass ihre Webseiten und Anwendungen auf verschiedenen Geräten und Bildschirmgrößen gut aussehen und benutzerfreundlich sind.

Verwandte Glossare