CSS-Update – Medienabfrage

Passen Sie Ihre Benutzeroberfläche an die Aktualisierungsrate des Bildschirms an.

Adam Argyle

CSS-Medienabfragen sind ein leistungsstarkes mit dem Sie das Erscheinungsbild Ihrer Website oder Web-App auf dem Gerät angezeigt wird. Mit Medienabfragen können Sie verschiedene Layouts für unterschiedliche Bildschirmgrößen, Ausrichtungen und andere Faktoren.

Die update Mit einer Medienabfrage kannst du die Benutzeroberfläche an die Aktualisierungsrate eines Geräts anpassen. Die kann den Wert fast, slow oder none melden, der sich auf die Funktionen verschiedener Geräte.

Geräte und Aktualisierungsrate

Die meisten Geräte, für die Sie Designs entwickeln, haben wahrscheinlich eine schnelle Aktualisierungsrate. Dieses umfasst Desktop-Computer und die meisten Mobilgeräte.

Sie können das Gerät abfragen, um zu sehen, ob es eine schnelle Aktualisierungsrate für das Rendering hat. und den Stil entsprechend gestalten, während gleichzeitig ein einziges Stylesheet bereitgestellt wird.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

Bei E-Readern und Geräten wie leistungsschwachen Zahlungssystemen kann es sein, Aktualisierungsrate. Sie wissen, dass das Gerät keine Animationen und keine häufigen Dadurch können Sie Akkunutzung oder fehlerhafte Updates reduzieren.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Schließlich gibt es Szenarien wie Papier- oder E-Ink-Displays, die nur bieten einen einzelnen Renderingpass. Eine solche Ausgabe kann nicht aktualisiert werden. wird als none bezeichnet. Dies kann wie folgt abgefragt werden:

@media (update: none) {
  /* one time render like printed paper */
}

Im folgenden CodePen sehen Sie eine schrittweise verbesserte Hover-Animation mit diese neue Medienabfrage aktualisieren:

Weitere Ressourcen

• CSS-Medienabfragen – Stufe 4
• Medienabfrage auf MDN aktualisieren