关于移动网络的每篇文章都提到了这一点，但是我找不到任何地方可以确切解释此属性的确切含义。
任何人都可以详细说明这种查询会检查什么吗？

@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

}

简短答案

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

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

公式为：

哪里：

是物理线性分辨率

和：

是逻辑线性分辨率

其他设备报告的设备像素比率不同，包括非整数。例如，诺基亚Lumia 1020报告为1.6667，Samsumg Galaxy S4报告为3，而苹果iPhone 6 Plus报告为2.46 （来源：dpilove）。但这在原则上不会改变任何内容，因为您永远不应该为任何一种特定的设备进行设计。

讨论区

CSS“像素”甚至没有定义为“某个屏幕上的一个像素”，而是定义为视角的非线性角度测量值，在手臂长度处大约为一英寸。资料来源：CSS绝对长度

对于网页设计，这具有很多含义，例如准备高清图像资源并以不同的设备像素比率小心地应用不同的图像。您不想强迫低端设备下载非常高分辨率的图像，而只是在本地进行缩小。您也不想让高端设备升级低分辨率图像以获得模糊的用户体验。

如果您坚持使用位图图像，以适应许多不同的设备像素比率，则应使用CSS Media Queries为不同的设备组提供不同的资源集。结合使用一些不错的技巧，例如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中，媒体查询是目前的唯一方法，而在HTML5中，图片元素可让您对不同的媒体查询使用不同的来源，但是这种支持仍然不是100％，因为大多数Web开发人员仍然需要一段时间才能支持IE11 （来源：caniuse）。

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

设备像素比率== CSS像素比率

在Web开发的世界中，设备像素比率（也称为CSS像素比率）是确定CSS如何解释设备的屏幕分辨率的因素。

浏览器的CSS通过以下公式计算设备的逻辑（或解释）分辨率：

例如：

苹果iPhone 6s

• 实际分辨率：750 x 1334
• CSS像素比：2
• 逻辑解析度：

当查看网页时，CSS会认为该设备具有375x667分辨率的屏幕，并且Media Queries将响应，好像该屏幕是375x667一样。但是，在屏幕上渲染的元素将比实际的375x667屏幕锐利两倍，因为物理屏幕中的物理像素是其两倍。

其他一些例子：

三星Galaxy S4

• 实际解析度：1080 x 1920
• CSS像素比：3
• 逻辑解析度：

iPhone 5S

• 实际分辨率：640 x 1136
• CSS像素比：2
• 逻辑解析度：

为什么存在设备像素比率？

之所以会创建CSS像素比率，是因为随着手机屏幕分辨率的提高，如果每个设备的CSS像素比率仍为1，那么网页将变得很小而看不到。

一个典型的全屏台式机显示器在1920x1080分辨率下大约为24“。想象​​一下，如果该显示器缩小到大约5”但具有相同的分辨率。在屏幕上查看内容将是不可能的，因为它们太小了。但是现在制造商始终使用1920x1080分辨率的手机屏幕。

因此，电话制造商发明了设备像素比率，以便他们可以继续提高电话屏幕的分辨率，清晰度和质量，而又不会使屏幕上的元素变得太小而看不见或看不到。

这是一个还可以告诉您当前设备的像素密度的工具：

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
给出每个CSS像素的设备像素数。

这几乎是不言自明的。该数字描述了用于显示一个“虚拟”像素（CSS中设置的大小）的“实际”像素（屏幕的物理像素）的比例。

Boris Smus的文章“可变像素密度的高DPI图像”对设备像素比率的定义更为准确：每个CSS像素的设备像素数目是一个很好的近似值，但并非全部。

请注意，您可以使用来获取设备使用的DPR window.devicePixelRatio。