🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2021-04-23

Медиа-запросы с -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio позволяют определить плотность пикселей экрана. Они помогают адаптировать дизайн под дисплеи с высокой четкостью, например Retina, выбирая разные ресурсы или стили. Эти свойства работают как альтернатива стандартным resolution, и предназначены для браузеров с префиксами WebKit.

Пример использования:

@media (-webkit-min-device-pixel-ratio: 2) {
  /* Для дисплеев с плотностью 2 и выше */
  body {
    background-image: url('retina-background.png');
  }
}

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.