Media Queries sind CSS-Regeln, die es ermöglichen, Stile und Layouts basierend auf den Eigenschaften des Geräts oder Bildschirms zu ändern. Dies ist eine wichtige Technik im Responsive Design, da sie es ermöglicht, spezifische Stile für verschiedene Bildschirmgrößen, Auflösungen und Gerätetypen anzupassen.
- Medienabfragen: Medienabfragen werden im CSS mit der
@media-At-Rule definiert, gefolgt von Bedingungen wie Bildschirmbreite, Auflösung und Orientierung.
- Bedingungen: Beispiele für Bedingungen sind
max-width, min-width, orientation (Portrait für hochkant oder Landscape für querformatig) und mehr.
- Stylen: Innerhalb einer Medienabfrage können verschiedene Stile und Eigenschaften für bestimmte Bildschirmgrößen oder Gerätetypen festgelegt werden.
- Kombination mit Flexbox: Media Queries können mit Flexbox (
display: flex) kombiniert werden, um die Anordnung und das Layout von Elementen auf verschiedenen Bildschirmen anzupassen.
@media (min-width: 600px) {
.box {width: 100%}
}
In obigem Beispiel steht übersetzt, dass Elemente mit Namen box ab 600 Pixel Bildschirmbreite selbst die volle Breite des vorhandenen Raums (des übergeordneten Elementes) einnehmen.
