css - 设备像素比到底是什么？

Question

每篇关于移动网络的文章都提到了这一点，但我找不到任何地方解释这个属性究竟衡量什么。
任何人都可以详细说明这样的查询会检查什么吗？

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Answer 1

简答

设备像素比是物理像素和逻辑像素之间的比率。例如，iPhone 4 和 iPhone 4S 报告设备像素比为 2，因为物理线性分辨率是逻辑线性分辨率的两倍。

• 物理分辨率:960 x 640
• 逻辑分辨率:480 x 320

公式为:

地点:

是物理线性分辨率

和:

是逻辑线性分辨率

其他设备报告不同的设备像素比，包括非整数像素比。例如，诺基亚 Lumia 1020 报告 1.6667，三星 Galaxy S4 报告 3，苹果 iPhone 6 Plus 报告 2.46(来源:dpilove)。但这原则上不会改变任何东西，因为您永远不应该为任何一种特定设备进行设计。

讨论

CSS“像素”甚至没有定义为“某个屏幕上的一个图片元素”，而是定义为 的非线性 Angular 测量视角，大约为一英寸的距离。 来源:CSS Absolute Lengths

这对网页设计有很多影响，例如准备高清图像资源以及在不同的设备像素比下仔细应用不同的图像。您不想强制低端设备下载非常高分辨率的图像，只是为了在本地缩小它。您也不希望高端设备为了模糊的用户体验而放大低分辨率图像。

如果您受困于位图图像，为了适应许多不同的设备像素比，您应该使用 CSS Media Queries或 HTML picture Element为不同的设备组提供不同的资源集。将它与像 background-size: cover 这样的好技巧结合起来或显式设置 background-size到百分比值。

例子

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

这样，每种设备类型只加载正确的图像资源。另请记住，CSS 中的 px 单位始终 对逻辑像素 进行操作。

矢量图形案例

随着越来越多的设备类型出现，为它们提供足够的位图资源变得越来越棘手。在 CSS 中，媒体查询是目前唯一的方式，而在 HTML5 中，picture element允许您对不同的媒体查询使用不同的来源，但支持仍然不是 100%，因为大多数 Web 开发人员仍然需要支持 IE11 一段时间(来源:caniuse)。

如果您需要不是照片的图标、艺术线条和设计元素的清晰图像，您需要开始考虑 SVG，它可以完美地缩放到所有分辨率。