Обновление CSS Медиа-запрос

Адаптируйте свой пользовательский интерфейс к возможностям частоты обновления экрана.

Adam Argyle

Медиа-запросы CSS — это мощный инструмент, который позволяет вам контролировать внешний вид вашего веб-сайта или веб-приложения в зависимости от устройства, на котором они просматриваются. С помощью медиа-запросов вы можете создавать разные макеты для разных размеров экрана, ориентации и других факторов.

Медиа-запрос update дает вам возможность адаптировать пользовательский интерфейс к частоте обновления устройства. Функция может сообщать значения fast , slow или none , которые относятся к возможностям различных устройств.

Устройства и частота обновления

Большинство устройств, для которых вы проектируете, скорее всего, будут иметь высокую частоту обновления. Сюда входят настольные компьютеры и большинство мобильных устройств.

Вы можете запросить устройство, посмотреть, имеет ли оно высокую частоту обновления для рендеринга контента, и соответствующим образом стилизовать его, сохраняя при этом единую таблицу стилей.

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

Электронные книги и такие устройства, как платежные системы с низким энергопотреблением, могут иметь низкую частоту обновления. Знание того, что устройство не поддерживает анимацию или частые обновления, означает, что вы можете сэкономить заряд батареи или избежать ошибочных обновлений.

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

Наконец, существуют такие сценарии, как печатная бумага или дисплеи с электронными чернилами, которые могут предлагать только один проход рендеринга. Подобный вывод вообще не может обновляться и называется none . Его можно запросить следующим образом:

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

В следующем коде CodePen вы увидите прогрессивно улучшенную анимацию при наведении с использованием нового медиа-запроса обновления:

Больше ресурсов

• CSS-медиа-запросы уровня 4
• Обновить медиа-запрос на MDN