Passen Sie Ihre Benutzeroberfläche an die Aktualisierungsrate des Bildschirms an.
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.
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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: