Hier findest du eine Übersicht über alle Möglichkeiten, wie du mithilfe von Medienfunktionen auf Geräte und Einstellungen reagieren kannst.
Ohne Medienabfragen wäre responsives Webdesign nicht möglich. Vor Media Queries gab es keine Möglichkeit zu erfahren, mit welchem Gerät Nutzer Ihre Website besucht haben. Die Designer mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder in Liquid-Layouts codiert.
Das hat sich mit der Einführung von Medienabfragen geändert. Zum ersten Mal konnten Designer den Nutzern entgegenkommen. Designer könnten ihre Layouts so anpassen, dass sie auf die Geräte der Nutzer reagieren.
Eine Medienabfrage besteht aus einem optionalen Medientyp und einer obligatorischen Medienfunktion. Die Medientypen haben sich im Laufe der Jahre nicht wesentlich verändert. Es gibt weiterhin nur vier mögliche Werte:
@media all
@media screen
@media print
@media speech
Die Medienfunktionen wurden hingegen stark erweitert. Designer können jetzt mehr für Nutzer tun, indem sie Designs nicht nur an die Bildschirmgröße anpassen.
Darstellungsbereichsabmessungen
Die mit Abstand beliebtesten Medienabfragen im Web beziehen sich auf die Darstellungsfensterbreite. Aber auch hier haben Sie die Wahl. Mit der Medienfunktion max-width
können Sie Stile unter einer bestimmten Breite anwenden. Mit der Medienfunktion min-width
können Sie Stile über einer bestimmten Breite anwenden.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Ich persönlich verwende min-width
. Ich wende Layoutstile additiv an. Ich füge an jedem Wendepunkt neue Layoutregeln hinzu, anstatt die vorherigen Regeln rückgängig zu machen.
Dieser additive Ansatz funktioniert auch für die Höhe. Mit min-height
können Sie weitere Regeln hinzufügen, sobald mehr Viewport-Höhe verfügbar ist. Angenommen, Sie haben ein Kopfzeilenelement, das Sie oben im Browserfenster verankern möchten, wenn genügend vertikaler Platz vorhanden ist.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Sie können aber auch die Medienfunktion max-height
verwenden. Hier ist die Überschrift standardmäßig verankert, aber die Fixierung wird aufgehoben, wenn nicht genügend vertikaler Platz vorhanden ist.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Die Wahl zwischen den Präfixen min-
und max-
gilt nicht nur für width
und height
. Die Medienfunktion aspect-ratio
bietet dieselben Optionen. Es gibt auch eine Version ohne Präfix, wenn Sie Stile mit einem genauen Seitenverhältnis anwenden möchten.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Unterschiedliche Stile für verschiedene Seitenverhältnisse zu erstellen, kann schnell unübersichtlich werden. Wenn Sie diese detaillierte Steuerung nicht benötigen, ist die Medienfunktion orientation
möglicherweise besser für Sie geeignet. Es gibt zwei mögliche Werte: portrait
oder landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Auch wenn die Begriffe „Hochformat“ und „Querformat“ am häufigsten für die Ausrichtung von Mobilgeräten verwendet werden, ist die orientation
-Medienfunktion nicht gerätespezifisch. Ein Browserfenster im Vollbildmodus auf einem typischen Laptop hat einen orientation
-Wert von landscape
.
Displays
Unterschiedliche Displays haben unterschiedliche Pixeldichten, die in dpi
(Punkte pro Zoll) gemessen werden. Mit der Medienfunktion resolution
können Sie Ihre Stile für verschiedene Pixeldichten anpassen. Wie aspect-ratio
gibt es auch resolution
in drei Varianten: Minimum, Maximum und Genau.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Möglicherweise müssen Sie nie resolution
-Medienabfragen verwenden. Die Pixeldichte ist in der Regel nur bei Bildern ein Problem. Responsive Bilder sind eine Möglichkeit, die Pixeldichte direkt in HTML zu steuern.
In CSS hingegen definieren Sie Ihre Animationen und Übergänge. Mit der Medienfunktion update
können Sie diese Animationen und Übergänge so anpassen, dass sie auf unterschiedliche Bildwiederholraten reagieren. Für diese Medienfunktion wird einer der drei Werte none
, slow
oder fast
erfasst.
Ein Wert von none
für update
bedeutet, dass keine Aktualisierungsrate festgelegt ist. Eine gedruckte Seite kann beispielsweise nicht aktualisiert werden.
Ein Wert von slow
für update
bedeutet, dass das Display nicht schnell genug aktualisiert werden kann. Ein E-Ink-Display ist ein Beispiel für einen Bildschirm mit einer langsamen Bildwiederholrate.
Ein Wert von update
= fast
bedeutet, dass das Display schnell genug aktualisiert wird, um Animationen und Übergänge zu verarbeiten.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nicht alle Aspekte des Displays hängen mit den Hardwarefunktionen zusammen. Im Modul zum Thema Design haben Sie gelernt, wie Sie Attribute in einer Manifestdatei für Web-Apps definieren. Eine dieser Properties heißt display
und kann den Wert fullscreen
, standalone
, minimum-ui
oder browser
haben. Mit der entsprechenden display-mode
-Medienfunktion können Sie Ihre Stile an diese verschiedenen Optionen anpassen.
Angenommen, Sie haben in Ihrem Webanwendungsmanifest den Wert „standalone
“ für display
angegeben. Wenn jemand Ihre Website auf seinem Startbildschirm hinzufügt, wird sie ohne Browseroberfläche geöffnet. Sie können für diese Nutzer eine Schaltfläche „Zurück“ anzeigen lassen.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Farbe
Es gibt zahlreiche Medienfunktionen, mit denen die Farbfunktionen eines Geräts abgefragt werden können. Wenn Sie Ihre Stile für Displays anpassen möchten, die nur Graustufen ausgeben, können Sie die Medienfunktion monochrome
ohne Wert verwenden.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Es gibt eine entsprechende color
-Medienfunktion.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Für Farbbildschirme können Sie Abfragen mit den Medienfunktionen color-gamut
, color-index
oder dynamic-range
schreiben. Alle geben spezifische Details zu den Farbfunktionen des Bildschirms an.
In diesem Beispiel werden die Farbwerte als Reaktion auf die Medienfunktion dynamic-range
aktualisiert, die die Kombination aus maximaler Helligkeit, Farbtiefe und Kontrastverhältnis des Displays meldet. Mögliche Werte sind standard
und high
. Ein High-Definition-Bildschirm mit dem dynamic-range
-Wert high
erhält mit der neuen CSS-Funktion color()
einen anderen Farbraum.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interaktion
Medienfunktionen können auch die Art des Eingabemechanismus melden, mit dem Nutzer mit Ihrer Website interagieren: hover
, any-hover
, pointer
und any-pointer
. Weitere Informationen finden Sie im Modul zur Interaktion.
Einstellungen
Es gibt eine Reihe von Mediaabfragen, mit denen Sie auf die Einstellungen der Nutzer reagieren können: prefers-color-scheme
, prefers-contrast
und prefers-reduced-motion
. Weitere Informationen finden Sie in den Modulen zu Designthemen und Barrierefreiheit.
Sie können Medienfunktionen in einer Medienabfrage kombinieren. Sie können Ihre Animationsstile so festlegen, dass sie nur angewendet werden, wenn das Gerät eine hohe Bildwiederholrate hat und der Nutzer keine reduzierte Bewegung bevorzugt.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Weitere Medienfunktionen
Weitere Medienfunktionen sind in Planung.
Die Medienfunktionen forced-colors
und inverted-colors
geben an, ob auf einem Gerät eine eingeschränkte oder eine invertierte Farbpalette verwendet wird.
Mit einer scripting
-Medienfunktion können Sie Ihr CSS anhand der Verfügbarkeit von JavaScript anpassen.
Mit einer Medienfunktion namens prefers-reduced-data
können Nutzer angeben, dass sie eine getaktete Verbindung haben, damit du kleinere oder weniger Assets senden kannst.
Andere Vorschläge werden noch formuliert. Im nächsten und letzten Modul erfahren Sie mehr über einen Vorschlag für eine Medienfunktion, die verschiedene Bildschirmkonfigurationen unterstützt.
Wissen testen
Ihr Wissen über Medienfunktionen testen
Kann eine Medienabfrage nach einem Gerät mit einer bestimmten Breite wie @media (width: 1024px)
suchen?
1023px
und unter 1025px
gesucht wird.min-width
und max-width
sind verfügbar.Kann eine Medienabfrage nach einem Gerät an einer bestimmten aspect-ratio
wie @media (aspect-ratio: 4/3)
suchen?
aspect-ratio
verfügbar.Welche Medienabfragen für Farben sind gültig?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
Welche der folgenden Medienabfragen für Nutzereinstellungen sind gültig?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)