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

【问题标题】：CSS equivalent to srcset (x-descriptors) for both iPhones and Android phones适用于 iPhone 和 Android 手机的 CSS 等效于 srcset（x 描述符）
【发布时间】：2019-04-30 13:58:27
【问题描述】：

我的 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 将以 2x 的像素比率加载图像。

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

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

【问题讨论】：

what exactly is device pixel ratio?的可能重复
我专门要求像素比为 3 的设备上的最小分辨率，但是我开始怀疑我是否真的需要最小分辨率，因为 DPI 是每点数英寸，我并不真正担心印刷物流。我可能只是坚持设备像素比而忘记最小分辨率。我的猜测是最小分辨率是一样的。
对...为了匹配您的图像标签，不考虑 DPI，您只需要媒体中的 min-device-pixel-ratio询问。如果您在标记中将尺寸与 srcset 结合使用。你也可以为你的背景图片添加相同的媒体查询...见这里：sitepoint.com/how-to-build-responsive-images-with-srcset Btw。您的标签上有 500（什么？）的宽度。我想它是像素，但你应该添加单位。
是的.. 我应该添加那个单位。谢谢（你的）信息。 ;)

标签： css image media-queries resolution devicepixelratio

【解决方案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);
  }
}

【讨论】：