Medienabfragen

Designer können ihre Designs an die Nutzer anpassen. Das beste Beispiel hierfür ist der Formfaktor des Geräts eines Nutzers, also seine Breite, sein Seitenverhältnis usw. Mithilfe von Medienabfragen können Designer auf diese verschiedenen Formfaktoren reagieren.

Medienabfragen werden mit dem Schlüsselwort @media (einem CSS-At-Rule) gestartet und können für eine Vielzahl von Anwendungsfällen verwendet werden.

Ausrichtung auf verschiedene Arten von Ausgabe

Websites werden häufig auf Bildschirmen angezeigt, aber CSS kann auch verwendet werden, um Websites für andere Ausgabemedien zu stylen. Vielleicht möchten Sie, dass Ihre Webseiten auf einem Bildschirm anders aussehen als beim Ausdrucken. Das ist mithilfe von Abfragen nach Medientypen möglich.

In diesem Beispiel ist die Hintergrundfarbe auf grau festgelegt. Wenn die Seite jedoch ausgedruckt wird, sollte die Hintergrundfarbe transparent sein. So wird die Druckertinte des Nutzers gespart.

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

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

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

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

Wenn Sie keinen Medientyp für Ihr CSS angeben, wird automatisch der Wert all verwendet. Diese beiden CSS-Blöcke sind äquivalent:

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

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

Auch diese beiden HTML-Zeilen sind gleichwertig:

<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. Die CSS-Datei wird nur angewendet, wenn der Medientyp übereinstimmt und die Bedingung erfüllt ist. Diese Bedingungen werden als Medienfunktionen bezeichnet.

Das ist die Syntax für Medienabfragen:

@media type and (feature)

Sie können Medienabfragen auf ein link-Element anwenden, wenn sich Ihre Stile in einem separaten Stylesheet befinden:

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

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

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

Wenn Sie lieber separate Stylesheets verwenden möchten:

<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 auch weglassen:

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

Oder Sie verwenden separate Stylesheets:

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

Separate Stylesheets für verschiedene Medientypen wie print sind zwar in Ordnung, aber für jede Medienabfrage ein eigenes Stylesheet zu verwenden, ist wahrscheinlich keine gute Idee. Verwenden Sie stattdessen @media-At-Rules.

Stile basierend auf der Größe des Darstellungsbereichs anpassen

Eine der nützlichsten Medienfunktionen für responsives Design sind die Abmessungen des Browserdarstellungsbereichs. Wenn Stile angewendet werden sollen, 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 unter einer bestimmten Breite anwenden:

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

Sie können in Ihren Medienabfragen beliebige CSS-Längeneinheiten verwenden. Wenn Ihre Inhalte hauptsächlich bildbasiert sind, sind Pixel die beste Wahl. Wenn Ihre Inhalte hauptsächlich textbasiert sind, ist es wahrscheinlich sinnvoller, eine relative Einheit zu verwenden, die auf der Textgröße basiert, z. B. em oder ch:

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

Sie können auch mehrere Medienabfragen kombinieren, um mehrere Bedingungen anzuwenden. Verwenden Sie das Wort and, um Ihre Media-Abfragen zu kombinieren:

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

Seitenaufteilung basierend auf den Inhalten auswählen

Der Punkt, an dem eine Bedingung für eine Medienfunktion wahr wird, wird als Unterbrechungspunkt bezeichnet. Wählen Sie die Breakpoints am besten anhand Ihrer Inhalte und nicht anhand beliebter Gerätegrößen aus, da sich diese mit jedem Technologierelease ändern können.

In diesem Beispiel ist 50em der Punkt, an dem die Textzeilen zu lang werden. Daher wird ein Bruchpunkt erstellt, um die Lesbarkeit der Benutzeroberfläche zu verbessern. Mithilfe des Attributs column-count wird der Text ab diesem Punkt in zwei Spalten unterteilt.

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

Kombinationen

Sie können Medienanfragen basierend auf der Höhe des Darstellungsbereichs verwenden, nicht nur auf der Breite. Das kann nützlich sein, um die Inhalte der Benutzeroberfläche „above the fold“ zu optimieren. Wenn Leser im vorherigen Beispiel ein breites, aber kurzes Browserfenster verwenden, müssen sie eine Spalte nach unten und dann wieder nach oben scrollen, um zum Anfang der zweiten Spalte zu gelangen. Es ist 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 30em hoch sein, damit die Spaltenstile angewendet werden können. Diese Seitenaufteilungen wurden basierend auf der Menge der Inhalte ausgewählt.

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

Diese Beispiele zeigen, wie Designs mithilfe von Medienabfragen an den Formfaktor des Geräts eines Nutzers angepasst werden können. Das ist aber nur ein kleiner Ausschnitt der Möglichkeiten. Media-Abfragen können weit über Breite und Höhe hinausgehen und auf die Nutzereinstellungen für Bedienungshilfen und Designfarben zugreifen. Die Verwendung von Medienabfragen für Layoutanpassungen ist ein guter Anfang für ein responsives Design, das auf diesen und weiteren Funktionen basiert.

Wissen testen

Testen Sie Ihr Wissen zu responsiven Media-Queries.