前端一倍图、二倍图、多倍图

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。
一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

这里是引用

设备像素:也叫物理像素，显示设备上最微小的物理部件。 比如 iphone 5：640 x 1136px. 不同的机型有不同的设备像素,固定死的。

这里需要讲一下显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

高分辨率屏幕：在 Windows 系统下，提高屏幕分辨率一般都是通过提高屏幕尺寸。而随着屏幕分辨率的提升，图像和文字显示目标会相应缩小，造成观看极其不便。
Retina为什么那么小的屏幕会有那么大的分辨率。为什么那么大的分辨率，非但没有使得文字和图像变小，反而更加清晰了呢？

高像素密度屏幕：高ppi, 以评估的 Retina 视网膜屏幕为例，它并不是像普通显示器那样通过增大尺寸来增加分辨率，而是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样就有了高像素密度屏幕。并且mac采用了矢量字体。

CSS像素: css pixel。抽象概念，设备无关像素。DIPS，device-independent像素。在标准情况下一个CSS像素对应一个设备像素。

这里是引用

使用css画了一个2 x 2px的盒子,在普通设备屏幕下是2 x 2px的设备像素。但是在Retina的屏幕下去使用了4 x 4px的设备像素。

device-pixel-ratio:在JS中叫做window.devicePixelRatio
公式： window.devicePixelRatio = 设备像素/css像素。这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此window.devicePixelRatio等于1.
但是在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.

屏幕密度: ppi :每英寸有多少的像素。视网膜屏幕：将960*640的分辨率压缩在，一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi）。当ppi>300的时候肉眼就无法分辨分辨率了。