Zapytanie o media przy aktualizacji CSS

Dostosuj interfejs użytkownika do częstotliwości odświeżania ekranu.

Adam Argyle

Zapytania o media w CSS to potężne narzędzie, które pozwala kontrolować wygląd witryny lub aplikacji internetowej w zależności od urządzenia, na którym jest ona wyświetlana. Zapytania o multimedia umożliwiają tworzenie różnych układów dla różnych rozmiarów ekranu, orientacji i innych czynników.

Zapytanie o multimedia update pozwala dostosować interfejs do częstotliwości odświeżania urządzenia. Funkcja może zwracać wartość fast, slow lub none, która odnosi się do możliwości różnych urządzeń.

Urządzenia i częstotliwość odświeżania

Większość urządzeń, na które projektujesz, prawdopodobnie ma szybką częstotliwość odświeżania. Dotyczy to komputerów i większości urządzeń mobilnych.

Możesz wysłać zapytanie do urządzenia, aby sprawdzić, czy ma ono szybką częstotliwość odświeżania na potrzeby renderowania treści, i odpowiednio sformatować treść, nadal korzystając z jednego arkusza stylów.

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

Czytniki i urządzenia takie jak niskonapięciowe systemy płatności mogą mieć niską częstotliwość odświeżania. Wiedząc, że urządzenie nie radzi sobie z animacjami lub częstymi aktualizacjami, możesz oszczędzać baterię lub zapobiegać błędnym aktualizacjom widoku.

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

I wreszcie, w przypadku drukowanego papieru lub wyświetlaczy e-ink może być potrzebne tylko jedno renderowanie. Takie dane nie mogą być w ogóle odświeżane i są nazywane none. Możesz wysłać takie zapytanie:

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

W tym przykładzie kodu CodePen możesz zobaczyć stopniowo ulepszaną animację najechania kursorem, która korzysta z nowego uaktualnienia zapytania o multimedia:

Więcej zasobów

• CSS Media Queries Level 4
• Aktualizowanie zapytania o multimedia w MDN