CSS-эквивалент srcset (x-descriptors) для iPhone и телефонов Android - PullRequest
Новая
       75

CSS-эквивалент srcset (x-descriptors) для iPhone и телефонов Android

0 голосов
/ 28 ноября 2018

У меня есть следующая декларация на моей html-странице.

<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">

X-дескриптор с заданными 2x и 3x.Я хочу создать эквивалент CSS, чтобы я мог поместить текст поверх этого изображения.Поэтому я хочу применить фоновое изображение к элементу, давайте просто назовем его #showcase.

Я нашел следующий CSS, который будет загружать изображение с соотношением пикселей 2x.

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  #showcase {
    background-image: url(banner_2000.jpg);
  }
}

У меня вопрос, что такое 3х версия.Очевидно, что соотношение устройств и пикселей равно 3, но какое минимальное разрешение?

1 Ответ

0 голосов
/ 20 августа 2019

Минимальное значение разрешения будет (96 * 3) = 288. Обычно для устройств оно составляет 96 точек на дюйм.Но в высоком разрешении вы умножаете 96 на значение отношения пикселей к устройству, так как значение отношения пикселей к устройству равно 2, значение минимального разрешения будет (96 * 2) = 192. Для 3x код будет следующим:

@media 
  (-webkit-min-device-pixel-ratio: 3), 
  (min-resolution: 288dpi) { 
  #showcase {
    background-image: url(banner_3000.jpg);
  }
}
...