Medienabfragen

Designschaffende können ihre Designs an die Nutzenden anpassen. Das deutlichste Beispiel dafür sind der Formfaktor des Geräts eines Nutzers, dessen Breite, das Seitenverhältnis des Geräts usw. Mithilfe von Medienabfragen können Designer auf diese verschiedenen Formfaktoren reagieren.

Medienabfragen werden mit dem Keyword @media (einer CSS-At-Regel) initiiert und können für eine Vielzahl von Anwendungsfällen verwendet werden.

Targeting auf verschiedene Ausgabetypen

Websites werden oft auf Bildschirmen angezeigt, aber CSS kann auch verwendet werden, um Websites für andere Ausgaben zu gestalten. Möglicherweise möchten Sie, dass Ihre Webseiten auf dem Bildschirm anders aussehen, auf dem gedruckten jedoch anders. Dies wird durch Abfragen von Medientypen ermöglicht.

In diesem Beispiel ist die Hintergrundfarbe grau. Wird die Seite jedoch gedruckt, sollte die Hintergrundfarbe transparent sein. Dadurch wird die Druckertinte des Nutzers gespart.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Sie können die @media-At-Regel so in Ihrem Stylesheet verwenden oder ein separates Stylesheet erstellen und das Attribut media auf ein link-Element anwenden:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Wenn Sie für Ihr Preisvergleichsportal keinen Medientyp angeben, erhält er automatisch den Medientypwert all. Diese beiden CSS-Blöcke sind äquivalent:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Diese beiden HTML-Zeilen sind ebenfalls äquivalent:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Abfragebedingungen

Sie können Medientypen Bedingungen hinzufügen. Diese werden als Medienabfragen bezeichnet. Der CSS-Code wird nur angewendet, wenn der Medientyp übereinstimmt und die Bedingung ebenfalls erfüllt ist. Diese Bedingungen werden als Medienfunktionen bezeichnet.

Dies ist die Syntax für Medienabfragen:

@media type and (feature)

Sie können Medienabfragen für ein link-Element verwenden, wenn sich Ihre Stile in einem separaten Stylesheet befinden:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Angenommen, Sie möchten verschiedene Stile anwenden, je nachdem, ob sich das Browserfenster im Querformat (Breite des Darstellungsbereichs größer als seine Höhe) oder im Hochformat befindet (die Höhe des Darstellungsbereichs ist größer als seine Breite). Mit der Medienfunktion orientation können Sie Folgendes testen:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Sie können auch separate Stylesheets verwenden:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

In diesem Fall ist der Medientyp all. Da dies der Standardwert ist, können Sie ihn weglassen:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Oder verwenden Sie separate Stylesheets:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Sie können zwar separate Stylesheets für verschiedene Medientypen wie print verwenden, es ist aber wahrscheinlich nicht sinnvoll, für jede Medienabfrage ein separates Stylesheet zu verwenden. Verwenden Sie stattdessen @media at-rules.

Stile basierend auf der Größe des Darstellungsbereichs anpassen

Eine der nützlichsten Medienfunktionen beim responsiven Design betrifft die Abmessungen des Browser-Darstellungsbereichs. Um Stile anzuwenden, wenn das Browserfenster eine bestimmte Breite überschreitet, verwenden Sie min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Mit der Medienfunktion max-width können Sie Stile unterhalb einer bestimmten Breite anwenden:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Sie können beliebige CSS-Längeneinheiten in Ihren Medienabfragen verwenden. Wenn deine Inhalte hauptsächlich bildbasiert sind, sind Pixel möglicherweise am sinnvollsten. Wenn Ihr Inhalt hauptsächlich textbasiert ist, ist es wahrscheinlich sinnvoller, eine relative Einheit zu verwenden, die auf der Textgröße basiert, wie em oder ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Sie können Medienabfragen auch kombinieren, um mehr als eine Bedingung anzuwenden. Verwenden Sie das Wort and, um Ihre Medienabfragen zu kombinieren:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Haltepunkte basierend auf dem Inhalt auswählen

Der Punkt, an dem eine Medienfunktionsbedingung erfüllt wird, wird als Haltepunkt bezeichnet. Sie sollten Haltepunkte basierend auf Ihren Inhalten und nicht basierend auf beliebten Gerätegrößen auswählen, da sich diese mit jedem technologischen Releasezyklus ändern können.

In diesem Beispiel ist 50em der Punkt, an dem die Textzeilen unangenehm lang werden. Daher wird ein Haltepunkt erstellt, um die Schnittstelle lesbarer zu machen. Mit der Eigenschaft column-count wird der Text ab diesem Zeitpunkt in zwei Spalten unterteilt.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinationen

Sie können Medienabfragen basierend auf der Höhe des Darstellungsbereichs und nicht nur auf der Breite verwenden. Dies kann nützlich sein, um den Inhalt der Benutzeroberfläche so zu optimieren, dass er ohne Scrollen sichtbar ist. Wenn Leser im vorherigen Beispiel ein breites, aber kurzes Browserfenster verwenden, müssen sie eine Spalte nach unten scrollen und dann wieder nach oben scrollen, um zum Anfang der zweiten Spalte zu gelangen. Es wäre sicherer, die Spalten nur anzuwenden, wenn der Darstellungsbereich sowohl breit als auch hoch genug ist.

Sie können Medienabfragen so kombinieren, dass die Stile nur angewendet werden, wenn alle Bedingungen erfüllt sind. In diesem Beispiel muss der Darstellungsbereich mindestens 50em breit und 60em hoch sein, damit die Spaltenstile angewendet werden können. Diese Haltepunkte wurden basierend auf der Menge des Inhalts ausgewählt.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Diese Beispiele zeigen, wie sich Designs mit Medienabfragen an den Formfaktor des Geräts eines Nutzers anpassen lassen. Sie kratzen aber nur die Möglichkeiten an. Medienabfragen gehen weit über Breite und Höhe hinaus und greifen auf Nutzereinstellungen für Bedienungshilfen und Designfarben zu. Die Verwendung von Medienabfragen zum Vornehmen von Layoutanpassungen ist ein guter Anfang für ein responsives Design, das auf diesen und weiteren Funktionen aufbaut.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über responsive Medienabfragen.