Media Queries

Geschätzte Lektüre: 6 Minuten 478 Ansichten

Was sind Media Queries?

Media Queries sind eine CSS-Technik, die es ermöglicht, Webseiten an verschiedene Geräte und Bildschirmgrößen anzupassen. Sie überprüfen Eigenschaften wie Bildschirmbreite, Auflösung oder Orientierung und wenden darauf basierend unterschiedliche CSS-Stile an.

Warum sind sie wichtig?

  • Ermöglichen responsive Design (Anpassung an Mobilgeräte, Tablets, Desktops).
  • Verbessern die Benutzererfahrung (UX) durch optimierte Darstellung.
  • Erfüllen Webstandards und Suchmaschinenanforderungen (z. B. Mobile-First-Indexing von Google).

Grundlegende Syntax

Eine Media Query besteht aus:

  • Einem Medientyp (z. B. screen, print).
  • Einer oder mehreren Bedingungen (z. B. min-width, max-width).
@media medientyp and (bedingung) {
  /* CSS-Regeln */
}

Beispiel:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Erklärung: Wenn die Bildschirmbreite ≤ 600px ist, wird der Hintergrund hellblau.

Medientypen

Media Queries können auf bestimmte Ausgabemedien zugeschnitten werden:

MedientypBeschreibung
allGilt für alle Geräte (Standard).
screenBildschirme (PC, Smartphone, Tablet).
printDruckvorschau/Druckausgabe.
speechScreenreader (für Barrierefreiheit).

Beispiel:

@media print {
  .header { display: none; } /* Header wird nicht gedruckt */
}

Häufig verwendete Media-Features (Bedingungen)

Breitenabhängige Abfragen – width, min-width, max-width

  • min-width: Stil gilt ab einer bestimmten Mindestbreite.
  • max-width: Stil gilt bis zu einer bestimmten Maximalbreite.

Beispiel (Responsive Breakpoints):

/* Mobilgeräte (bis 600px) */
@media (max-width: 600px) {
  .container { width: 100%; }
}

/* Tablets (601px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .container { width: 80%; }
}

/* Desktop (ab 901px) */
@media (min-width: 901px) {
  .container { width: 60%; }
}

Media Query Breakpoints

GerätetypBreakpoint
XS – Sehr kleine Gerätemax-width: 320px
SM – Kleine Smartphonesmax-width: 480px
MD – Normale Smartphonesmax-width: 576px
LG – Große Smartphonesmax-width: 640px
XL – Tablets Hochformatmax-width: 768px
XXL – Tablets Querformatmax-width: 992px
Laptopsmax-width: 1024px
Große Laptops/Desktopsmax-width: 1200px
Große Desktopsmin-width: 1201px
Ultra-Wide / 4Kmin-width: 1440px, 1920px
Portrait / Landscapeorientation: portrait/landscape
Retinamin-resolution: 192dpi etc.

Beispiel:

/* Smartphones (Hochformat) */
@media (max-width: 480px) {
  /* CSS-Regeln für kleine Smartphones */
}

/* Smartphones und Tablets (Querformat) */
@media (max-width: 768px) {
  /* CSS-Regeln für größere Handys/Tablets */
}

/* Tablets und kleinere Laptops */
@media (max-width: 992px) {
  /* CSS-Regeln für Tablets/Laptops */
}

/* Laptops und Desktops */
@media (max-width: 1200px) {
  /* CSS-Regeln für größere Bildschirme */
}

/* Große Desktops */
@media (min-width: 1201px) {
  /* CSS-Regeln für extra große Bildschirme */
}

Höhenabhängige Abfragen (height, min-height, max-height)

Nützlich für Anpassungen bei unterschiedlichen Bildschirmhöhen.

Beispiel:

@media (max-height: 500px) {
  .sidebar { display: none; } /* Sidebar ausblenden bei geringer Höhe */
}

Geräteorientierung (orientation)

  • portrait: Höhe > Breite (Smartphone hochkant).
  • landscape: Breite > Höhe (Smartphone quer).

Beispiel:

@media (orientation: landscape) {
  .menu { float: left; } /* Menü links bei Querformat */
}

Pixelverhältnis (resolution)

Wichtig für hochauflösende Displays (Retina).

Beispiel:

@media (min-resolution: 2dppx) {
  .logo { background-image: url("logo@2x.png"); } /* Schärferes Bild */
}

Fortgeschrittene Techniken

Mobile-First vs. Desktop-First

Mobile-First:

  • Beginne mit Stilen für kleine Bildschirme.
  • Erweitere dann mit min-width für größere Geräte.
/* Basisstil (Mobil) */
body { font-size: 14px; }

/* Tablet/Desktop */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

Desktop-First:

  • Beginne mit großen Bildschirmen.
  • Passe mit max-width für kleinere Geräte an.
/* Basisstil (Desktop) */
body { font-size: 18px; }

/* Tablet/Mobil */
@media (max-width: 767px) {
  body { font-size: 16px; }
}

Verschachtelte Media Queries (mit Sass/Less)

In Präprozessoren wie Sass können Media Queries verschachtelt werden:

.container {
  width: 100%;
  @media (min-width: 768px) {
    width: 750px;
  }
}

Kombinierte Bedingungen

Mehrere Bedingungen können mit and, , (ODER), not verknüpft werden.

Beispiel:

/* Für Bildschirme zwischen 600px und 900px oder im Hochformat */
@media (min-width: 600px) and (max-width: 900px),
       (orientation: portrait) {
  .box { background: yellow; }
}

Praxisbeispiel: Responsive Navigation

HTML:

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

CSS:

/* Mobil (vertikale Navigation) */
.navbar {
  display: flex;
  flex-direction: column;
}

/* Desktop (horizontale Navigation) */
@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: space-around;
  }
}
Dieses Dokument teilen

Media Queries

Oder Link kopieren

INHALT

Abonnieren

×
Cancel