物理像素和逻辑像素

做项目的过程中有这样的问题：
设计师给的图标，使用的时候都是取宽和高的一半来用的，比如：设计给一张尺寸为56x56的图标，使用的时候尺寸却用32x32。

为什么要取一半使用呢？
公司的设计稿基本给的是二倍图，是为了兼容高清屏幕的图片高清晰显示。

物理像素和逻辑像素的关系
物理像素指设备像素，css中通常用到的单位指的是逻辑像素。在Retina屏幕出现之前，1逻辑像素由1物理像素来显示，Retina屏幕出现之后，1逻辑像素由多个物理像素来显示。对比图如下：

普通屏幕与Retina屏幕像素显示对比图

2px x 2px的大小，在普通屏幕中，需要4个像素点来显示，而在Retina屏幕中，则需要16个像素点来显示。

那么，如果在普通屏幕中正常显示的图片，在高清屏幕中会不会有问题？

普通屏幕的1个CSS像素点对应4个高清屏幕的像素点，1个分成4个，不够分的情况下，颜色会取近似值。所以在高清屏上，在普通屏幕正常显示的图片会变的模糊。

举例说明，一张100x100的图片，通过CSS设置它{ width:100px; height:100px }。在普通密度桌面显示屏的电脑上打开，没有什么问题，但假设在手机/或者Retina屏幕的Mac，按照逻辑分辨率来渲染，他们的devicePixelRatio=2，那么就相当于拿4个物理像素来描绘1个电子像素。这等于拿一个2倍的放大镜去看图片，图片可能因此变得模糊。

devicePixelRatio用来查看设备像素比。

所以我们就会使用2倍图，来保证普通屏和高清屏显示一致。

参考资料
高清屏概念解析与检测设备像素比的方法
前端工程师需要明白的「像素」
前端不止：Retina屏幕下两倍图