设备像素比到底是多少？

Question

设备像素比到底是多少？每一篇关于移动Web的文章都提到了这一点，但是我在任何地方都找不到这个属性度量的解释。有人能详细说明一下这样的查询是什么吗？@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和iPhone4S的设备像素比为2，因为物理线性分辨率是逻辑线性分辨率的两倍。

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

公式是：

其中：

是物理线性分辨率

以及：

是合乎逻辑的线性分辨率

其他设备报告不同的设备像素比，包括非整数的。例如，诺基亚Lumia 1020报告1.6667，Samsumg Galaxy S4报告3，苹果iPhone6Plus报告2.46(资料来源：枕骨)..但这不会改变任何原则上的任何东西，因为你永远不应该为任何一个特定的设备设计。

讨论

CSS“像素”甚至不是定义为“某个屏幕上的一个图片元素”，而是定义为非线性角度测量的视角，大约是一英寸的距离。资料来源：CSS绝对长度

当涉及到网页设计时，这有很多含义，比如准备高清晰度的图像资源，以及在不同的设备像素比下小心地应用不同的图像。你不想强迫低端设备下载一张非常高分辨率的图像，只想在本地缩小它的比例。你也不希望高端设备为模糊的用户体验提供高质量的低分辨率图像。

如果您被位图图像卡住，以适应许多不同的设备像素比，则应使用CSS媒体查询为不同的设备组提供不同的资源集。把这个和好的技巧结合起来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'); }}

这样，每个设备类型只加载正确的图像资源。还请记住，pxCSS单元总在逻辑像素.

矢量图形的一个例子

随着越来越多的设备类型出现，为它们提供足够的位图资源变得越来越困难。在CSS中，媒体查询是当前唯一的方法，而在HTML 5中，图像元素允许您对不同的媒体查询使用不同的来源，但支持程度仍然不是100%，因为大多数web开发人员仍然需要支持IE11一段时间。(资料来源：犬科).

如果你需要清晰的图标，线条艺术，设计元素不是照片，您需要开始考虑SVG，它可以很好地扩展到所有分辨率。