这个属性在移动 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
}
设备像素比是物理像素与逻辑像素之间的比例。例如，iPhone 4和iPhone 4S的设备像素比为2，因为物理线性分辨率是逻辑线性分辨率的两倍。
计算公式如下：
其中 是物理线性分辨率，而
是逻辑线性分辨率。
其他设备报告不同的设备像素比，包括非整数值。例如，诺基亚 Lumia 1020 报告为 1.6667，三星 Galaxy S4 报告为 3，苹果 iPhone 6 Plus 报告为 2.46 (来源：dpilove)。但从原则上讲，这并不改变任何事情，因为你永远不应该为任何特定设备进行设计。
这对于网页设计有很多影响，比如准备高清图像资源以及根据不同设备的像素比谨慎应用不同的图片。你不希望低端设备下载一个非常高分辨率的图像，然后在本地进行缩小。同样，你也不希望高端设备将低分辨率的图像放大，以便造成模糊的用户体验。
如果您在处理位图图像时遇到困难，为了适应许多不同的设备像素比，您应该使用CSS媒体查询或HTML图片元素来为不同组设备提供不同资源集。结合一些技巧，如`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 元素 可以让您针对不同的媒体查询使用不同的来源，但支持仍未达到100％，因为大多数网页开发人员仍需为 IE11 提供支持一段时间（来源：caniuse）。
如果您需要清晰的图标、线条艺术和设计元素（而非照片），您需要开始考虑使用 SVG，它可以美观地适配所有分辨率。
在Web开发的世界中，设备像素比（也称为CSS像素比）决定了CSS如何解释设备屏幕分辨率。
浏览器的CSS通过以下公式计算设备的逻辑（或解释）分辨率：
例如：
Apple iPhone 6s
当查看网页时，CSS会认为设备有一个375x667分辨率的屏幕，并且媒体查询将响应为屏幕是375x667。但渲染在屏幕上的元素将比实际的375x667屏幕更清晰，因为物理屏幕中有两倍多的物理像素。
其他一些例子：
Samsung Galaxy S4
iPhone 5s
创建CSS像素比的原因是手机屏幕分辨率越来越高，如果每个设备仍然有一个CSS像素比为1，那么网页就会渲染得太小而无法看清。
一个典型的全屏桌面显示器大约是24英寸，分辨率为1920x1080。想象一下如果那个显示器缩小到约5英寸，但分辨率仍然相同。在屏幕上查看内容将变得不可能，因为它们会非常小。但是制造商现在不断推出1920x1080分辨率的手机屏幕。
因此，设备像素比是由手机制造商发明的，以便他们可以继续推动手机屏幕的分辨率、清晰度和质量，而不会使屏幕上的元素太小而难以看清或阅读。
以下是一个也可以告诉您当前设备像素密度的工具:
这篇文章介绍了移动设备中像素密度的概念，特别是“最小设备像素比”(min-device-pixel-ratio)。在设计和开发响应式网页时，理解像素密度对于确保页面在不同设备上显示正确非常重要。Boris Smus的文章“面向变量像素密度的高分辨率图片”更准确地定义了设备像素比：每个CSS像素的设备像素数是一个很好的近似值，但并非全部信息。
请注意，您可以使用window.devicePixelRatio获取设备使用的DPR。
width=device-width，那么它会被拉伸到全屏吗？ - ilyobackground-size技巧来最大化利用显示器。 - Anders Marzi Tornblad