2.1 Grundlagen der Media Queries
Media Queries (Media-Abfragen) sind eines der wichtigsten Werkzeuge zur Erstellung von responsiven Websites. Mit ihnen kannst du Styles für verschiedene Geräte und Bildschirmgrößen anpassen, was eine optimale Anzeige und Benutzerfreundlichkeit sicherstellt. Unten betrachten wir die Grundlagen der Verwendung von Media Queries, deren Syntax und Beispiele für die Anpassung von Styles für verschiedene Bildschirme.
Media Queries verwenden die Regel @media, die es ermöglicht, bestimmte Stile nur unter bestimmten Bedingungen anzuwenden.
Bedingungen können Bildschirmgrößen, Auflösung, Ausrichtung und andere Parameter umfassen.
Syntax:
@media media-type and (media-feature) {
/* Styles */
}
Wo:
media-type: Medientyp, für den die Styles gelten sollen. Meistens wird screen verwendetmedia-feature: Medieneigenschaften wie Breite, Höhe, Ausrichtung usw.
Beispiel:
- In diesem Beispiel wird der Hintergrund der Seite hellblau, wenn die Bildschirmbreite 768 Pixel nicht überschreitet.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Typen von Media Queries
1. Abfragen nach Breite und Höhe
Diese Media Queries ermöglichen es, Styles je nach Breite und Höhe des Ansichtsfensters zu ändern.
Beispiele:
/* Styles anwenden, wenn die Bildschirmbreite kleiner oder gleich 768px ist */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Styles anwenden, wenn die Bildschirmhöhe größer als 800px ist */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientierung (orientation)
Abfragen nach der Bildschirmorientierung ermöglichen es, Styles anzupassen, je nachdem, ob das Gerät sich im Hochformat (portrait) oder Querformat (landscape) befindet.
Beispiele:
/* Styles für Hochformat anwenden */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Styles für Querformat anwenden */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Pixeldichte (resolution)
Media Queries nach Pixeldichte ermöglichen es, Styles für Geräte mit unterschiedlicher Pixeldichte anzupassen, wie z.B. Retina-Displays.
Beispiele:
/* Styles für Bildschirme mit einer Pixeldichte von 2x und höher anwenden */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Styles für Bildschirme mit einer Pixeldichte unter 2x anwenden */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Kombination von Media Queries
Media Queries können mit logischen Operatoren wie and, not und only kombiniert werden.
Beispiele
Verwendung des Operators and:
/* Styles für Geräte mit einer Bildschirmbreite zwischen 600px und 1200px anwenden */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Verwendung des Operators not:
/* Styles für alle Geräte anwenden, außer für solche mit einer Bildschirmbreite von weniger als 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Verwendung des Operators only:
/* Styles nur für Bildschirme anwenden */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION