Adaptez votre interface utilisateur aux fonctionnalités de fréquence d'actualisation de l'écran.
Les requêtes média CSS sont un outil puissant qui vous permet de contrôler l'apparence de votre site Web ou application sur l'appareil sur lequel elle est consultée. Avec les requêtes média, vous pouvez créer des mises en page différentes pour différentes tailles d'écran, orientations et d'autres facteurs.
La
update
une requête média vous permet d'adapter l'interface utilisateur à la fréquence d'actualisation d'un appareil. La
la caractéristique peut signaler une valeur fast
, slow
ou none
qui correspond à
les capacités des différents appareils.
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Appareils et fréquence d'actualisation
La plupart des appareils pour lesquels vous concevez sont susceptibles d'avoir une fréquence d'actualisation rapide. Ce comprend les ordinateurs de bureau et la plupart des appareils mobiles.
Vous pouvez interroger l'appareil et voir s'il a une fréquence d'actualisation rapide pour l'affichage contenu et style en conséquence tout en envoyant une seule feuille de style.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Les lecteurs de livres numériques et les appareils tels que les systèmes de paiement la fréquence d'actualisation. Savoir que l'appareil ne peut pas gérer les animations ou vous réduisez l'utilisation de la batterie ou les mises à jour d'affichage défectueuses.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Enfin, certains scénarios tels que les
écrans papier imprimés ou e-Ink
une seule passe de rendu. Un tel résultat ne peut
pas du tout être actualisé et
appelé none
. Elle peut être interrogée comme suit:
@media (update: none) {
/* one time render like printed paper */
}
Dans le CodePen suivant, une animation de survol progressivement améliorée à l'aide de cette nouvelle requête média de mise à jour: