理解基础的像素概念
-
物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）
-
设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是下面的设备像素比
-
设备像素比（dpr）：= 物理像素 / 设备独立像素(px)
即dpr等于1时，1px=1物理像素，依次类推。
dpr !==1 时导致图片模糊
- 在1dpr的屏幕上，位图像素和物理像素一一对应没什么问题，但是在retina屏上，由于一个px由4个甚至更多的物理像素组成，并且单个位图像素不能进一步分割，所以会出现就近取色的情况，如果取色不均，那么就会导致图片模糊。 对于这种情况，只能采用@2x、@3x这样的倍图来适配高清展示。