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.

Targeting auf verschiedene Ausgabetypen

Websites werden oft auf Bildschirmen angezeigt, aber CSS kann auch verwendet werden, um Websites für andere Ausgaben zu gestalten. Vielleicht möchten Sie, dass Ihre Webseiten auf dem Bildschirm unterschiedlich aussehen, ausgedruckt jedoch anders sind. Die Abfrage von Medientypen macht dies möglich.

In diesem Beispiel ist die Hintergrundfarbe auf Grau eingestellt. Wird die Seite jedoch gedruckt, sollte die Hintergrundfarbe transparent sein. Dadurch wird die Druckertinte des Nutzers gespeichert.

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

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

Sie können die @-Regel von @media in Ihrem Stylesheet so verwenden: oder Sie erstellen ein separates Stylesheet und verwenden das Attribut media für ein link-Element:

<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;
   }
}

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 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.

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 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.
}

Oder wenn Sie separate Stylesheets bevorzugen:

<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 die Verwendung separater 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-Regeln.

Stile basierend auf der Größe des Darstellungsbereichs anpassen

Eine der nützlichsten Medienfunktionen für responsives Webdesign sind die Abmessungen des Darstellungsbereichs des Browsers. 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 möglicherweise am sinnvollsten. Wenn deine Inhalte hauptsächlich textbasiert sind, ist es wahrscheinlich sinnvoller, eine auf der Textgröße basierende relative Einheit zu verwenden, zum Beispiel em oder ch:

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

Sie können auch 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.
}

Haltepunkte basierend auf dem Inhalt 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. Dies kann bei der Optimierung von Benutzeroberflächeninhalten "above the fold" (ohne Scrollen sichtbar) nützlich sein. 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 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. 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 Medienabfragen verwendet werden können, um Designs an den Formfaktor des Geräts der Nutzenden anzupassen. aber sie kratzen nur an der Oberfläche der Möglichkeiten. Medienabfragen können weit über Breite und Höhe hinausgehen, Zugriff auf Nutzereinstellungen für Bedienungshilfen und Designfarben 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.