# Media Queries

Media Queries ermöglichen es, CSS-Regeln abhängig von gerätespezifischen Attributen (Bildschirmgrösse, Pixeldichte), Ausgabegerät (Bildschirm, Drucker) oder Sensordaten des Geräts (Lichtsensor, ist es hell oder dunkel?) zu definieren.

## Allgemeine Deklaration

```css
@media <filter> {
    /**
     * Diese Regeln sind nur dann aktiv, wenn der
     * <filter> auf das Gerät des Besuchers zutrifft.
     */
}
```

## Medien-Typen

Um einzelne Medien-Typen zu filtern, kann `all`, `screen`, `print` oder `speech` (spezielle Styles für Screenreader) verwendet werden.

```css
body {
    background: red;
}

/**
 * Beim Ausdrucken der Website soll der Seitenhintergrund
 * nicht rot sein.
 */
@media print {
    body {
        background: none;
    }
}
```

## Medien-Features

Media Queries lassen sich auf diverse `Features` anwenden. \
Eine Liste aller verfügbarer Features befindet sich hier: [developer.mozilla.org/en-US/docs/Web/CSS/@media#Media\_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features).

Die Syntax setzt sich zusammen aus `(feature-name: Wert)`.

### Fensterbreite: `min-width` / `max-width`

Die mit Abstand am meisten verwendeten Features sind `min-width` und `max-width`. Damit kannst du dein Layout dynamisch auf die Bildschirmgrösse von Desktops, Tablets und Smartphones anpassen.

```css
.container {
    width: 1200px;
}

/**
 * Sobald das Browserfenster weniger Breit wird als
 * 1200px, soll der Container nur noch 600px Breit sein.
 */
@media (min-width: 1200px) {
    .container {
        width: 600px;
    }
}
```

**Achtung:** Gerade wenn es um die Bildschirmbreite geht möchte man diese oft nur für *Bildschirme* anwenden, nicht etwa wenn die Website ausgedruckt wird. Aus diesem Grund macht es Sinn im Filter zwei Features mit dem `and` Operator zu verketten.

```css
@media screen and (min-width: 1200px) {
    /** 
     * Diese Styles werden garantiert nur bei der Anzeige
     * auf Bildschirmen angewendet.
     */
}
```

#### Verkettung mehrerer Bedingungen

Wie schon bei `@media screen and (min-width: 1200px)` kann ich auch mehrere Bedingungen verknüpfen, z.B. um nur bestimmte Fensterbreiten anzusprechen:&#x20;

```
@media screen and (min-width: 800px) and (max-width: 1199px) {
    /** 
     * Diese Styles werden garantiert nur bei der Anzeige
     * auf Bildschirmen angewendet.
     */
}
```

### Fensterbreite: Media Query Range Syntax

Seit 2023 können auch Vergleichs-Operatoren genutzt werden, sog. media query range features:&#x20;

```css
/* statt (max-width: 1199px): */
@media (width < 1200px) {
  /* … */
}
@media (width => 1200px) {
  /* … */
}
```

Damit können auch Bereiche einfach abgefragt werden:&#x20;

```css
/* statt screen and (max-width: 800px) and (max-width: 1199px): */
@media screen and (800px <= width < 1200px) {
  /* … */
}
```

### Ausrichtung: Hoch- / Querformat

Wenn ich wissen will, ob ein Bildschirm im Hoch- oder Querformat benutzt wird, kann ich dies abfragen:&#x20;

```
@media screen and (orientation: landscape) { /* Oder portrait für Hochformat */
  /* Styling für querformat */
}
```

Das eher unüblich, öfter wird einfach die Fensterbreite (min-width/max-width) abgefragt.&#x20;

### Helligkeit: `light-level`

Mit der `CSS Media Queries Level 4` Spezifikation wurden viele neue Features eingeführt. \
**Achtung:** Manche davon werden momentan [noch nicht in allen Browsern](https://caniuse.com/?search=CSS%20Media%20Queries%20Level%204) unterstützt.

```css
body {
    background: white;
    color: black;
}

@media (light-level: dim) {
    /**
     * Bei dunkeln Lichtverhältnissen soll der Website-Hintergrund
     * zu schwarz wechseln.
     */
    body {
        background: black;
        color: white;
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://m101.ict-bz.ch/tag-3/05-responsive-design/media-queries.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.