Hier siehst du, wie du mit Medienfunktionen auf Geräte und Einstellungen reagieren kannst.
Responsives Design ist ohne Medienabfragen nicht möglich. Vor Medienabfragen konnte nicht festgestellt werden, mit welcher Art von Gerät die Nutzer Ihre Website besuchen. Designschaffende mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder Flüssig-Layouts codiert.
Das hat sich mit der Einführung von Medienabfragen geändert. Zum ersten Mal konnten Designschaffende Menschen auf der Hälfte des Weges treffen. Designschaffende könnten ihre Layouts an die Geräte der Nutzer anpassen.
Eine Medienabfrage umfasst einen optionalen Medientyp und eine obligatorische Medienfunktion. Die Medientypen haben sich über die Jahre kaum verändert. Es gibt immer noch nur vier mögliche Werte:
@media all
@media screen
@media print
@media speech
Die Medienfunktionen hingegen haben stark erweitert. Designschaffende können Nutzende jetzt über die Hälfte hinaus treffen und Designs so anpassen, dass sie weit mehr als nur die Bildschirmgröße passen.
Dimensionen des Darstellungsbereichs
Die bei Weitem beliebtesten Medienabfragen im Web sind die Suchanfragen, die sich auf die Breite des Darstellungsbereichs beziehen. Aber auch hier haben Sie die Wahl. Sie können die Medienfunktion max-width verwenden, um Stile unterhalb einer bestimmten Breite anzuwenden, oder die Medienfunktion min-width, um Stile über einer bestimmten Breite anzuwenden.
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 nutze min-width gerne. Ich wende Layoutstile auf additiv an. Anstatt die vorherigen Regeln rückgängig zu machen, werde ich für jeden Haltepunkt neue Layoutregeln hinzufügen.
Dieser additive Ansatz funktioniert auch für die Höhe. Mit min-height können Sie weitere Regeln einführen, sobald mehr Höhe des Darstellungsbereichs verfügbar wird. Beispielsweise können Sie ein Kopfzeilenelement oben im Browserfenster verankern, wenn genügend vertikaler Platz vorhanden ist.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Du kannst aber auch die Medienfunktion „max-height“ verwenden. Hier ist die Kopfzeile standardmäßig verankert, aber die Auffälligkeit wird entfernt, wenn nicht genügend vertikaler Platz vorhanden ist.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Die Auswahl zwischen den Präfixen min- und max- gilt nicht nur für width und height. Die Medienfunktion aspect-ratio bietet dieselbe Auswahl. Es bietet auch eine Version ohne Präfix, wenn Sie Stile mit einem exakten Verhältnis von Breite zu Höhe 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.
}
Die Bereitstellung verschiedener Stile für unterschiedliche Seitenverhältnisse könnte schnell aus dem Ruder laufen. Wenn Sie diese Einstellungen nicht benötigen, ist die Medienfunktion von orientation möglicherweise besser für Sie geeignet. Es gibt zwei mögliche Werte: portrait und 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 Medienfunktion „orientation“ nicht gerätespezifisch. Ein Vollbild-Browserfenster auf einem typischen Laptop hat den orientation-Wert landscape.
Displays
Verschiedene Displays haben unterschiedliche Pixeldichten, gemessen in dpi, Punkt pro Zoll. Mit der Medienfunktion resolution können Sie die Stile an verschiedene Pixeldichten anpassen. Wie aspect-ratio gibt es auch für resolution drei Varianten: Minimum, Maximum und Exakt.
@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.
}
Sie müssen möglicherweise keine resolution-Medienabfragen verwenden. Die Pixeldichte ist normalerweise nur bei Bildern ein Problem. Mit responsiven Bildern lässt sich die Pixeldichte direkt in HTML umgehen.
Im CSS-Code hingegen definieren Sie Animationen und Übergänge. Diese Animationen und Übergänge lassen sich mit der Medienfunktion update an unterschiedliche Aktualisierungsraten anpassen. Diese Medienfunktion gibt einen von drei Werten zurück: none, slow und fast.
Wenn für update der Wert none festgelegt ist, gibt es keine Aktualisierungsrate. So kann beispielsweise eine gedruckte Seite nicht aktualisiert werden.
Ein update-Wert von slow bedeutet, dass die Anzeige nicht schnell aktualisiert werden kann. Ein E-Ink-Display ist ein Beispiel für einen Bildschirm mit einer langsamen Aktualisierungsrate.
Ein update-Wert von fast bedeutet, dass die Anzeige 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 beziehen sich auf die Hardwarefunktionen. Im Modul zum Thema haben Sie gesehen, wie Eigenschaften in einer Manifestdatei einer Web-App definiert werden. Eine dieser Eigenschaften heißt display und Sie können ihr den Wert fullscreen, standalone, minimum-ui oder browser zuweisen. Mit der entsprechenden Medienfunktion von display-mode können Sie Ihre Stile an diese verschiedenen Optionen anpassen.
Angenommen, Sie haben in Ihrem Web-App-Manifest den display-Wert standalone angegeben. Wenn jemand Ihre Website zu seinem Startbildschirm hinzufügt, wird die Website ohne Browseroberfläche gestartet. Diesen Nutzenden könnten Sie eine Schaltfläche „Zurück“ anzeigen.
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 die Stile für Displays anpassen möchten, die nur Grautöne ausgeben, können Sie die Medienfunktion monochrome ohne Wert verwenden.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Es gibt eine entsprechende Medienfunktion für color.
@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. Sie alle melden bestimmte Details zu den Farbfunktionen des Bildschirms.
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 angibt. Mögliche Werte sind standard und high. Ein HD-Bildschirm mit dem dynamic-range-Wert high erhält mithilfe 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
Über Medienfunktionen kann auch die Art des Eingabemechanismus erfasst werden, der zur Interaktion mit Ihrer Website verwendet wird: hover, any-hover, pointer und any-pointer. Weitere Informationen findest du im Modul zur Interaktion.
Einstellungen
Es gibt eine Reihe von Medienabfragen, mit denen Sie auf Nutzereinstellungen reagieren können: prefers-color-scheme, prefers-contrast und prefers-reduced-motion. Weitere Informationen finden Sie in den Modulen zu Design und Barrierefreiheit.
Sie können Medienfunktionen in einer Medienabfrage kombinieren. Sie können Ihre Animationsstile so anpassen, dass sie nur dann angewendet werden, wenn das Gerät eine hohe Aktualisierungsrate hat und der Nutzer keine Präferenz für eine reduzierte Bewegung zum Ausdruck gebracht hat.
@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 umgekehrte Farbpalette verwendet wird.
Mit einer scripting-Medienfunktion können Sie Ihr CSS je nach Verfügbarkeit von JavaScript anpassen.
Mit einer Medienfunktion namens prefers-reduced-data können Nutzer angeben, dass sie eine kostenpflichtige Verbindung nutzen, sodass Sie kleinere oder weniger Assets senden können.
Andere Angebote werden noch formuliert. Im nächsten und letzten Modul lernen Sie einen Vorschlag für eine Medienfunktion kennen, die verschiedene Bildschirmkonfigurationen verarbeitet.
Wissen testen
Testen Sie Ihr Wissen über Medienfunktionen
Mit einer Medienabfrage kann nach einem Gerät mit einer bestimmten Breite wie @media (width: 1024px) gesucht werden?
1023px und unter 1025px geprüft wird.min-width und max-width sind verfügbar.Mit einer Medienabfrage kann unter einem bestimmten aspect-ratio wie @media (aspect-ratio: 4/3) nach einem Gerät gesucht werden.
aspect-ratio vorhanden.Was sind gültige Abfragen für Farbmedien?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)Welche der folgenden Medienabfragen von 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)