Medienabfragen

Designschaffende können ihre Designs an die Anforderungen der Nutzenden anpassen. Das eindeutigste Beispiel hierfür ist der Formfaktor des Geräts des Nutzers. ihre Breite, das Seitenverhältnis des Geräts usw. Mit Medienabfragen können Designschaffende auf diese verschiedenen Formfaktoren reagieren.

Medienabfragen werden mit dem Keyword @media (CSS-At-Regel) initiiert 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 eingestellt. Wenn die Seite jedoch ausgedruckt wird, 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 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 für Ihr CSS keinen Medientyp angeben, hat er automatisch den Medientyp-Wert all. 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 Abfragen werden als Medienabfragen bezeichnet. Der CSS-Code wird nur angewendet, wenn der Medientyp und die Bedingung ebenfalls erfüllt sind. Diese Bedingungen werden als Medienfunktionen bezeichnet.

Das 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 unterschiedliche Stile anwenden, je nachdem, ob sich das Browserfenster im Querformat befindet. (Breite des Darstellungsbereichs ist größer als seine Höhe) oder Hochformat 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.
}

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 bei Bedarf 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)">

Es ist zwar in Ordnung, separate Stylesheets für verschiedene Medientypen wie print zu verwenden, ist es 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 für responsives Design sind die Abmessungen des Browserdarstellungsbereichs. 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 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. Mit dem Wort and können Sie Ihre Medienabfragen 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 Medienfunktionsbedingung erfüllt wird, wird als Haltepunkt bezeichnet. Idealerweise wählen Sie Ihre Haltepunkte nicht auf der Grundlage gängiger Gerätegrößen, da diese sich mit jedem neuen Technologie-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 verwenden, nicht nur auf der Breite. Das kann nützlich sein, um die Inhalte der Benutzeroberfläche „above the fold“ zu optimieren. Im vorherigen Beispiel ein breites, aber kurzes Browserfenster nutzen, sie eine Spalte nach unten und dann wieder nach oben scrollen müssen, um zum Anfang der zweiten Spalte zu gelangen. Es wäre sicherer, die Spalten nur dann anzuwenden, wenn der Darstellungsbereich sowohl breit genug als auch hoch genug ist.

Sie können Media-Abfragen kombinieren, sodass 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 Designs mithilfe von Mediaabfragen 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 zum Vornehmen von Layoutanpassungen ist ein guter Anfang für ein responsives Design, das auf diesen und weiteren Funktionen aufbaut.

Wissen testen

Testen Sie Ihr Wissen zu responsiven Medienabfragen.