css - 适用于 iPhone 和 Android 手机的 CSS 等效于 srcset（x 描述符）

Question

我的 html 页面中有以下声明。

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

定义了 2x 和 3x 的 x 描述符。我想创建一个等效的 css，以便我可以在此图像上放置文本。因此，我想将背景图像应用于元素，我们就称之为#showcase。

我发现以下 CSS 将以 2 倍的像素比率加载图像。

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

我的问题是什么是 3x 版本。显然 device-pixel-ratio 是 3，但是最小分辨率是多少呢？

Answer 1

最小分辨率值为 (96 * 3) = 288。通常设备为 96dpi。但是，在高分辨率下，您需要将 96 与设备像素比值相乘，因为设备像素比值为 2，最小分辨率值为 (96 * 2) = 192。对于 3x，代码如下：

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