Wie funktionieren Media-Queries in der Webentwicklung…

Media-Queries ermöglichen es, bestimmte CSS-Stile abhängig von den Eigenschaften des Geräts oder des Anzeigebereichs anzuwenden. Sie werden verwendet, um ein responsives Design zu erstellen, das auf verschiedenen Bildschirmen korrekt angezeigt wird, einschließlich mobiler Geräte, Tablets und Desktops.

Hauptsyntax der Media-Query:

@media <Medientyp> and (<Ausdruck>) {
  /* CSS-Regeln */
}

<Medientyp> bestimmt, für welchen Gerätetyp die Anfrage gilt (z.B. screen, print, all).
<Ausdruck> legt die Bedingungen fest, unter denen die Stile angewendet werden (z.B. Breite, Höhe, Bildschirmorientierung, Auflösung).

Beliebte Ausdrücke für responsives Design:

min-width: Stile werden angewendet, wenn die Breite des Anzeigebereichs gleich oder größer als der angegebene Wert ist.
max-width: Stile werden angewendet, wenn die Breite des Anzeigebereichs gleich oder kleiner als der angegebene Wert ist.
orientation: Stile werden je nach Bildschirmorientierung (portrait oder landscape) angewendet.
resolution: Stile werden je nach Bildschirmauflösung angewendet.

Beispiel für die Verwendung von max-width für mobile Geräte:

/* Standardstile */
body {
  font-size: 16px;
}

/* Stile für Bildschirme bis zu 768px Breite (typisch für mobile Geräte) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Beispiel für die Verwendung von min-width für Desktops ("mobile first"-Ansatz):

/* Standardstile für mobile Geräte */
.column {
  width: 100%;
}

/* Stile für Bildschirme ab 992px Breite (typisch für Desktops) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Kombination von Ausdrücken mit and, or (bei Media-Queries wird or durch Kommas geschrieben) und not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Nur für Tablets */
}

@media screen and (orientation: landscape), print {
  /* Für Querformat und Druck */
}

Die Meta-Tag viewport ist wichtig für das korrekte Funktionieren von Media-Queries auf mobilen Geräten:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width setzt die Breite des Viewports auf die Breite des Geräts.
initial-scale=1.0 legt den initialen Zoomfaktor fest.

Ohne dieses Meta-Tag skalieren viele mobile Browser die Seite standardmäßig, ignorieren die tatsächliche Gerätebreite, was die Responsivität beeinträchtigt.

Wie funktionieren Media-Queries in der Webentwicklung für responsives Design, einschließlich mobiler Geräte?