Dostosuj interfejs do częstotliwości odświeżania ekranu.
Zapytania o multimedia w CSS to zaawansowane narzędzie, które pozwala kontrolować wygląd witryny lub aplikacji internetowej w zależności od urządzenia, na którym się wyświetla. Za pomocą zapytań o multimedia możesz tworzyć różne układy dla różnych rozmiarów, orientacji i innych czynników.
Zapytanie o media update pozwala dostosować interfejs do częstotliwości odświeżania urządzenia. Funkcja może zgłaszać wartość fast, slow lub none, która jest związana z możliwościami różnych urządzeń.
Urządzenia i częstotliwość odświeżania
Większość urządzeń, na które projektujesz, prawdopodobnie będzie miała dużą częstotliwość odświeżania. Dotyczy to komputerów i większości urządzeń mobilnych.
Możesz przesłać zapytanie do urządzenia, sprawdzić, czy ma ono dużą częstotliwość odświeżania przy renderowaniu treści, i odpowiednio dobrać styl, a jednocześnie przesłać pojedynczy arkusz stylów.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Czytniki e-booków i urządzenia takie jak systemy płatnicze o niskiej mocy mogą mieć niską częstotliwość odświeżania. Wiedząc, że urządzenie nie jest w stanie obsłużyć animacji lub częstych aktualizacji, możesz oszczędzać baterię i błędne aktualizacje widoku.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Istnieją też scenariusze, np. wyświetlacze drukowane na papierze lub matrycy E-ink, w których dostępna jest tylko jedna karta renderowania. Takie dane wyjściowe w ogóle nie mogą być odświeżane i są nazywane none. Zapytanie może wyglądać tak:
@media (update: none) {
/* one time render like printed paper */
}
W kodzie CodePen możesz zobaczyć stopniowo ulepszoną animację najechania kursorem za pomocą nowego zapytania o media aktualizacji: