每篇关于移动网络的文章都提到了这一点，但我无法找到关于该属性究竟测量什么的解释。
谁能详细说明这样的查询会检查什么？
@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
}
【问题讨论】：
标签： css
设备像素比是物理像素与逻辑像素的比值。例如，iPhone 4 和 iPhone 4S 报告的设备像素比为 2，因为物理线性分辨率是逻辑线性分辨率的两倍。
公式为：
地点：
是物理线性分辨率
和：
是逻辑线性分辨率
其他设备报告不同的设备像素比率，包括非整数比率。例如，Nokia Lumia 1020 报告 1.6667，Samsumg Galaxy S4 报告 3，Apple iPhone 6 Plus 报告 2.46（来源：dpilove）。但这原则上不会改变任何事情，因为您永远不应该为任何一种特定设备进行设计。
CSS“像素”甚至没有定义为“某个屏幕上的一个图片元素”，而是定义为 视角的非线性角度测量，大约为@987654334 @ 一英寸的距离。 来源：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 单元always 作用于逻辑像素。
随着越来越多的设备类型出现，为所有设备类型提供足够的位图资源变得越来越棘手。在 CSS 中，媒体查询是目前唯一的方法，而在 HTML5 中，picture element 允许您为不同的媒体查询使用不同的来源，但支持仍然不是 100%，因为大多数 Web 开发人员仍然需要支持 IE11 一段时间（来源：caniuse）.
如果您需要不是照片的图标、线条艺术、设计元素的清晰图像，则需要开始考虑 SVG，它可以完美地缩放到所有分辨率。
【讨论】：
width=device-width 的页面 CSS 尺寸，我会把它拉伸到全屏吗？
background-image 的高分辨率图片，则可以将其与-webkit-background-size:50% 结合使用，否则，图像大小将遵循逻辑 像素数。 w3.org/TR/2002/WD-css3-background-20020802/#background-size
background-size 技巧来优化使用显示。
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
给出每个 CSS 像素的设备像素数。
这几乎是不言自明的。该数字描述了使用多少“真实”像素（屏幕的物理像素）来显示一个“虚拟”像素（大小在 CSS 中设置）的比率。
【讨论】：
在网络开发领域，设备像素比（也称为 CSS 像素比）决定了 CSS 如何解释设备的屏幕分辨率。
浏览器的 CSS 通过以下公式计算设备的逻辑（或解释）分辨率：
例如：
苹果 iPhone 6s
查看网页时，CSS 会认为设备具有 375x667 分辨率的屏幕，媒体查询将响应，好像屏幕是 375x667。但是屏幕上渲染的元素将是实际 375x667 屏幕的两倍，因为物理屏幕中有两倍多的物理像素。
其他一些例子：
三星 Galaxy S4
iPhone 5s
之所以创建 CSS 像素比，是因为随着手机屏幕分辨率的提高，如果每个设备的 CSS 像素比仍然为 1，那么网页将呈现得太小而无法看到。
典型的全屏桌面显示器大约为 24 英寸，分辨率为 1920x1080。想象一下，如果该显示器缩小到大约 5 英寸，但分辨率相同。在屏幕上查看东西是不可能的，因为它们太小了。但是制造商现在一直在推出 1920x1080 分辨率的手机屏幕。
因此，手机制造商发明了设备像素比，以便他们可以继续推动手机屏幕的分辨率、清晰度和质量，而不会使屏幕上的元素太小而无法看到或阅读。
这是一个工具，它还可以告诉您当前设备的像素密度：
【讨论】：
width: 100% 的 300 像素图像将是显示的整个宽度。它不会被拉伸。屏幕“认为”它是一个 300 像素的显示器。图像根据逻辑/css 分辨率显示。现在，在您的示例中，您还可以提供 600 像素的图像。它将是逻辑 300 像素显示的全宽，但由于您的显示是原生 600 像素，因此图像看起来将是原始 300 像素图像的两倍。更大的图像，但它看起来更好，因为显示器有所有这些额外的像素。这就是“Retina Displays”背后的理念。
Boris Smus 的文章High DPI Images for Variable Pixel Densities 对设备像素比有更准确的定义：每个 CSS 像素的设备像素数是一个很好的近似值，但不是全部。
请注意，您可以通过window.devicePixelRatio 获取设备使用的 DPR。
【讨论】：
设备像素比与设备的像素密度直接相关。
我能找到的最简洁的描述：
DPR 的目的是保持 CSS 像素的大小一致，因此 字母、符号、图像和其他所有内容的大小一致 屏幕，跨越具有不同物理像素的各种设备 密度。
【讨论】：