每一篇关于移动网络的文章都提到了这一点，但我找不到一篇解释这一属性到底是用来衡量什么的文章。 有人能详细说明一下这样的查询检查什么吗?
@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
}
当前回答
设备像素比与设备像素密度直接相关。
我能找到的最简洁的描述:
DPR的目的是保持CSS像素大小一致，因此 大小一致的字母，符号，图像和其他一切 屏幕，跨各种设备具有不同的物理像素 密度。
来源:screenresolutiontest
其他回答
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio 给出每个CSS像素的设备像素数。
这几乎不言自明。该数字描述了“真实”像素(屏幕的物理像素)用于显示一个“虚拟”像素(在CSS中设置的大小)的比例。
简短的回答
设备像素比是物理像素与逻辑像素的比值。例如，iPhone 4和iPhone 4S报告的设备像素比为2，因为物理线性分辨率是逻辑线性分辨率的两倍。
物理分辨率:960 x 640 逻辑分辨率:480 x 320
公式为:
地点:
物理分辨率是线性的吗
and:
逻辑分辨率是线性的吗
其他设备报告不同的设备像素比，包括非整数。例如，诺基亚Lumia 1020报告的是1.6667，三星Galaxy S4报告的是3，苹果iPhone 6 Plus报告的是2.46。但这在原则上不会改变任何东西，因为你永远不应该为任何特定的设备进行设计。
讨论
CSS的“像素”甚至不被定义为“某个屏幕上的一个图片元素”，而是作为一个非线性的角度测量
当涉及到网页设计时，这有很多含义，比如准备高清图像资源，在不同的设备像素比上仔细应用不同的图像。您不希望强制低端设备下载一个非常高分辨率的图像，而只是在本地将其缩小。您也不希望高端设备将低分辨率图像升级为模糊的用户体验。
如果你被位图图像所困，为了适应许多不同的设备像素比例，你应该使用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中，图片元素允许你使用不同的来源进行不同的媒体查询，但仍然不是100%的支持，因为大多数web开发人员仍然需要在一段时间内支持IE11。
如果图标、线条艺术、非照片的设计元素需要清晰的图像，那么就需要开始考虑SVG，它可以完美地适应所有分辨率。
设备像素比与设备像素密度直接相关。
我能找到的最简洁的描述:
DPR的目的是保持CSS像素大小一致，因此 大小一致的字母，符号，图像和其他一切 屏幕，跨各种设备具有不同的物理像素 密度。
来源:screenresolutiontest
Boris Smus的文章《可变像素密度的高DPI图像》对设备像素比有一个更准确的定义:每个CSS像素的设备像素数是一个很好的近似值，但不是全部。
注意，您可以通过window.devicePixelRatio获得设备使用的DPR。
设备像素比== CSS像素比
在web开发的世界中，设备像素比(也称为CSS像素比)决定了CSS如何解释设备的屏幕分辨率。
浏览器的CSS通过以下公式计算设备的逻辑(或解释)分辨率:
例如:
苹果iPhone 6s
实际分辨率:750 x 1334 CSS像素比:2 逻辑分辨率:
当查看网页时，CSS会认为设备有一个375x667分辨率的屏幕，媒体查询将会响应，就好像屏幕是375x667。但在屏幕上呈现的元素将是实际375x667屏幕的两倍，因为在物理屏幕上有两倍的物理像素。
其他一些例子:
三星Galaxy S4
实际分辨率:1080 × 1920 CSS像素比:3 逻辑分辨率:
iPhone 5 s
实际分辨率:640 x 1136 CSS像素比:2 逻辑分辨率:
为什么存在设备像素比?
创建CSS像素比的原因是，随着手机屏幕的分辨率越来越高，如果每个设备的CSS像素比仍然为1，那么网页就会渲染得太小而无法看到。
典型的全屏桌面显示器大约是24英寸，分辨率为1920x1080。想象一下，如果显示器缩小到大约5英寸，但分辨率相同。在屏幕上看东西是不可能的，因为它们太小了。但制造商现在一直在推出1920x1080分辨率的手机屏幕。
所以，设备像素比是手机制造商发明的，这样他们就可以继续提高手机屏幕的分辨率、清晰度和质量，而不会让屏幕上的元素太小而无法看到或阅读。
下面这个工具还可以告诉你当前设备的像素密度:
http://bjango.com/articles/min-device-pixel-ratio/
