设备像素比例究竟是什么？
每篇关于移动网络的文章都提到了这一点，但是我无法找到解释这个属性究竟是什么的措施。
任何人都可以详细说明什么是这样的查询查询？
@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'); } }
这样，每种设备类型只加载正确的图像资源。 另外请记住，CSS中的px单位总是在逻辑像素上运行 。
一个矢量图形的情况
随着越来越多的设备类型出现，为它们提供足够的位图资源变得更加棘手。 在CSS中，媒体查询是目前唯一的方式，在HTML5中， 图片元素可以让你使用不同的媒体查询来源，但支持仍然不是100％，因为大多数web开发者仍然需要支持IE11一段时间来源： caniuse ） 。
如果您需要图标，线条艺术和非照片设计元素的清晰图像， 则需要开始思考SVG，该SVG可以精确地缩放到所有分辨率。
设备像素比率== CSS像素比率
在网页开发的世界里，设备像素比例（也称为CSS像素比例）决定了CSS如何解释设备的屏幕分辨率。
浏览器的CSS通过公式计算设备的逻辑（或解释）分辨率：
例如：
苹果iPhone 6s
- 实际分辨率：750 x 1334
- CSS像素比例：2
- 逻辑分辨率：
在查看网页时， CSS会认为设备具有375×667的分辨率屏幕， 媒体查询将响应，就好像屏幕是375×667 。 但是屏幕上的渲染元素将会是实际的375×667屏幕的两倍，因为在物理屏幕中物理像素的数量是其两倍。
其他一些例子：
三星Galaxy S4
- 实际分辨率：1080 x 1920
- CSS像素比例：3
- 逻辑分辨率：
iPhone 5S
- 实际分辨率：640 x 1136
- CSS像素比例：2
- 逻辑分辨率：
为什么设备像素比例存在？
CSS像素比例创建的原因是因为手机屏幕获得更高的分辨率，如果每个设备仍然具有CSS像素比例1，则网页将呈现太小以至于看不到。
一个典型的全屏桌面显示器大概是24“，1920×1080的分辨率。想象一下，如果这台显示器缩小到5”左右，但分辨率相同。 在屏幕上看东西是不可能的，因为它们太小了。 但制造商现在一直在与1920×1080分辨率的手机屏幕出来。
所以手机制造商发明了设备像素比例，这样他们就可以继续推动手机屏幕的分辨率，清晰度和质量，而不会使屏幕上的元素太小而看不到。
这是一个工具，可以告诉你当前设备的像素密度：
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz设备象素比
给出每个CSS像素的设备像素数量。
这几乎是自我解释。 该数字描述使用多少“实际”像素（屏幕的物理像素）来显示一个“虚拟”像素（以CSS设置的大小）的比率。
Boris Smus的文章High DPI Images for Variable Pixel Densities提供了更准确的设备像素比率定义：每个CSS像素的设备像素数目是一个很好的近似值，但不是全部。
请注意，您可以通过window.devicePixelRatio获取设备使用的DPR。
