Zapytanie o media przy aktualizacji CSS

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

Adam Argyle

Zapytania o media CSS zapewniają które pozwala kontrolować wygląd witryny lub aplikacji internetowej na urządzeniu, na którym się wyświetlają. Za pomocą zapytań o multimedia można tworzyć w zależności od rozmiaru, orientacji ekranu i innych czynników.

update Zapytanie o media pozwala dostosować interfejs użytkownika do częstotliwości odświeżania urządzenia. funkcja może zgłosić wartość fast, slow lub none, która odnosi się do funkcje różnych urządzeń.

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

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

Możesz wysłać zapytanie do urządzenia i sprawdzić, czy ma ono szybka częstotliwość odświeżania na potrzeby renderowania treści, dostosować ich styl i zachować jeden arkusz stylów.

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

Czytniki e-booków i urządzenia, takie jak systemy płatności o niskim zużyciu energii, mogą działać wolniej. częstotliwość odświeżania. Świadomość, że urządzenie nie potrafi obsłużyć animacji lub często aktualizacji, co pozwala oszczędzać baterię lub wyświetlać błędne aktualizacje widoku.

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

Istnieją również sytuacje, takie jak wydruki na papierze lub wyświetlaczu e-papieru, za pomocą pojedynczej karty renderowania. Takie dane wyjściowe w ogóle nie mogą się odświeżać i są to none. Zapytanie może wyglądać tak:

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

W poniższym kodzie CodePen znajdziesz stopniowo ulepszoną animację po najechaniu kursorem myszy: to nowe zapytanie o media:

Więcej zasobów

• Zapytania o media CSS – poziom 4
• Aktualizacja zapytania o media w MDN