Medienabfragen

Designer können ihre Designs an die Bedürfnisse der Nutzer anpassen. Das beste Beispiel dafür ist der Formfaktor des Geräts eines Nutzers, z. B. seine Breite, das Seitenverhältnis des Geräts und andere Aspekte. Mit Media-Queries können Designer auf diese unterschiedlichen Formfaktoren reagieren.

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

Auf verschiedene Arten von Ausgaben ausrichten

Websites werden häufig auf Bildschirmen angezeigt, aber CSS kann auch verwendet werden, um Websites für andere Ausgaben zu gestalten. Möglicherweise sollen Ihre Webseiten auf einem Bildschirm anders aussehen als beim Ausdrucken. Das ist durch Abfragen von Medientypen möglich.

In diesem Beispiel ist die Hintergrundfarbe auf Grau festgelegt. Wenn die Seite jedoch gedruckt wird, sollte die Hintergrundfarbe transparent sein. So wird die Druckerfarbe des Nutzers geschont.

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

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

Sie können die @media-Regel in Ihrem Stylesheet so verwenden oder ein separates Stylesheet erstellen und das media-Attribut für ein 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 Medientyp all verwendet. Die beiden folgenden CSS-Blöcke sind gleichwertig:

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

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

Diese beiden HTML-Zeilen sind ebenfalls 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 Media Queries bezeichnet. Das CSS wird nur angewendet, wenn der Medientyp übereinstimmt und die Bedingung erfüllt ist. Diese Bedingungen werden als Media-Funktionen bezeichnet.

Das ist die Syntax für Media Queries:

@media type and (feature)

Sie können Media-Queries 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 das Browserfenster im Querformat (die Breite des Darstellungsbereichs ist größer als die Höhe) oder im Hochformat (die Höhe des Darstellungsbereichs ist größer als die Breite) angezeigt wird. Dazu können Sie das Media-Feature orientation verwenden:

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

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

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

Oder mit separaten Stylesheets:

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

Die Verwendung separater Stylesheets für verschiedene Medientypen wie print ist in Ordnung. Es ist jedoch wahrscheinlich keine gute Idee, für jede Media-Anfrage ein separates Stylesheet zu verwenden. Verwenden Sie stattdessen @media-Regeln.

Stile basierend auf der Darstellungsbereichsgröße anpassen

Für responsives Design ist eine der nützlichsten Media-Funktionen die, die sich auf die Abmessungen des Browserdarstellungsbereichs bezieht. Wenn Sie Stile anwenden möchten, wenn das Browserfenster breiter als eine bestimmte Breite ist, verwenden Sie min-width.

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

Mit dem Media-Feature max-width können Sie Stile unterhalb einer bestimmten Breite anwenden:

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

Diese Media-Query kann auch mit dem Media-Feature width und dem Operator „kleiner als oder gleich“ geschrieben werden.

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

Sie können in Ihren Media-Queries beliebige CSS-Längeneinheiten verwenden. Wenn Ihre Inhalte hauptsächlich auf Bildern basieren, sind Pixel möglicherweise die beste Option. Wenn Ihre Inhalte hauptsächlich auf Text basieren, 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 Media-Queries kombinieren, um mehrere Bedingungen anzuwenden. Verwenden Sie das Wort and, um Media-Anfragen zu kombinieren:

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

Das kann auch mit der Bereichssyntax geschrieben werden.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Breakpoints basierend auf den Inhalten auswählen

Der Punkt, an dem eine Media-Funktionsbedingung zutrifft, wird als Breakpoint bezeichnet. Es ist besser, die Breakpoints basierend auf Ihren Inhalten und nicht auf beliebten Gerätegrößen auszuwählen, da sich diese mit jedem Technologie-Release-Zyklus ändern.

In diesem Beispiel ist 50em der Punkt, an dem die Textzeilen unangenehm lang werden. Daher wird ein Breakpoint erstellt, um die Benutzeroberfläche lesbarer zu machen. Mit dem Attribut column-count wird der Text ab diesem Punkt in zwei Spalten aufgeteilt.

@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 den Inhalt der Benutzeroberfläche „above the fold“ zu optimieren. Im vorherigen Beispiel müssen Leser, die ein breites, aber kurzes Browserfenster verwenden, eine Spalte nach unten 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 Media-Anfragen kombinieren, damit die Formatierungen nur angewendet werden, wenn alle Bedingungen erfüllt sind. In diesem Beispiel muss der Viewport mindestens 50em Pixel breit und 30em Pixel hoch sein, damit die Spaltenstile angewendet werden. Diese Breakpoints wurden basierend auf der Menge der Inhalte ausgewählt.

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

Sie können auch die Keywords or und not verwenden, um komplexere Situationen auszudrücken, in denen Sie Stile anwenden möchten. Es kann logisch schwierig sein, diese zu begründen. Testen Sie daher, ob sie wie erwartet funktionieren und interagieren.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Diese Beispiele zeigen, wie Media-Queries verwendet werden können, um Designs an den Formfaktor des Geräts eines Nutzers anzupassen. Sie sind jedoch nur ein kleiner Ausschnitt der Möglichkeiten. Media-Queries können weit über Breite und Höhe hinausgehen und auf Nutzereinstellungen für Bedienungshilfen und Designfarben zugreifen. Die Verwendung von Media Queries zur Anpassung des Layouts ist ein guter Anfang für ein responsives Design, das auf diesen und weiteren Funktionen basiert.

Wissen testen

Testen Sie Ihr Wissen über responsive Media-Queries.