Medienabfragen in CSS ermöglichen es Ihnen, das Layout Ihrer Website an verschiedene Bildschirmgrößen, -auflösungen und andere spezifische Merkmale anzupassen. Diese Funktion ist besonders nützlich für responsive Designlösungen.
In einer Medienabfrage werden verschiedene CSS-Stile abhängig von den Eigenschaften des Anzeigegeräts angewendet.
Hier ist ein einfaches Beispiel, wie Medienabfragen in CSS angewendet werden können:
```css
body {
background-color: lightblue;
}
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
```
In diesem Beispiel wird die Hintergrundfarbe des Body-Elements standardmäßig auf hellblau eingestellt. Sobald jedoch die Mindestbreite des Anzeigegeräts 600 Pixel erreicht, ändert sich die Hintergrundfarbe in hellgrün.
Beachten Sie den Aufbau der Medienabfrage:
- `@media`: Das Schlüsselwort, mit dem die Medienabfrage eingeleitet wird.
- `screen`: Der Medientyp. Andere mögliche Werte sind `print` (für Drucker) und `all` (für alle Geräte).
- `and`: Das Schlüsselwort, das verwendet wird, um verschiedene Bedingungen zu kombinieren.
- `(min-width: 600px)`: Die Bedingung, die erfüllt sein muss, damit der darauf folgende CSS-Block angewendet wird.
Sie können auch mehrere Bedingungen in einer Medienabfrage kombinieren, zum Beispiel um Stile für bestimmte Geräte mit bestimmten Auflösungen festzulegen:
```css
@media screen and (min-width: 600px) and (max-width: 1200px) {
/* CSS-Stile für Bildschirme mit einer Breite zwischen 600px und 1200px */
}
```
In diesem Beispiel werden die CSS-Stile nur auf Bildschirme mit einer Breite zwischen 600 und 1200 Pixeln angewendet.
