像素
像素，一个似乎很熟悉，但真正动手总结的时候，一堆似懂非懂的名词~
先来弄明白像素、物理像素、分辨率、逻辑像素、设备像素比都是什么👊
1、什么是 ---> 像素？
在计算机图形学和数字图像处理中，像素是图像显示的基本元素。
比如基于像素描述图片尺寸（如下图片尺寸为 426 * 340 像素）
2、什么是 ---> 物理像素？
物理像素又叫设备像素，指显示设备上的实际硬件像素。
是硬件开发相关的单位，是基于一个一个的硬件小方块，其大小由硬件厂家设定。
3、分辨率 ---> 是什么？
我们常常遇到分辨率，像显示屏的分辨率，图片的分辨率，到底是啥？？？
图像分辨率： 是说该图像宽高上的像素点数，这个值在一开始图案生成的时候就已经确定下来。
显示分辨率： 在显示媒介上在单位长度内显示多少像素，比如常见的分辨率是 1920 * 1080
4、逻辑像素 ---> 又是啥?
逻辑像素又叫设备独立像素，在移动设备和计算机显示器等显示设备上使用的抽象度量单位。
逻辑像素更像是软件开发相关的单位，开发通过它来表达软件相关的尺寸。前端标注的10px等值、浏览器显示尺寸、UI给出的UI稿尺寸都是我们所说逻辑像素。
5、那 ---> 设备像素比（dpr）？
是指在移动开发中1个css逻辑像素占用多少物理像素。可通过window.devicePixelRatio 查看，且网页的缩放可改变这个值。
计算公式：设备像素比 = 物理像素 / 逻辑像素
基于以上的理解得出~
对于1倍屏设备，物理像素是等于逻辑像素，显示1个逻辑像素，对应 1 * 1 = 1 个像素格子的面积渲染
对于2倍屏(又称 Retina 显示屏), 显示1个逻辑像素，对应 2 * 2 = 4 个像素格子的面积渲染
对于3倍屏(又称 Retina HD 显示屏), 显示1个逻辑像素，对应 3 * 3 = 9 个像素格子的面积渲染
结合理论分析案例~
展示一张 2px * 2px 大小的图片，尺寸完全一样两个设备 A、B
A 的分辨率是 5 * 5 , B 的分辨率为 10 * 10
若A的设备像素比 = 1.0，即1倍屏，得到在 A 设备中 1个逻辑像素用1 * 1个像素格子来绘制
若B的设备像素比 = 2.0，即2倍屏，得到在 B 设备中 1个逻辑像素用2 * 2个像素格子来绘制
真实业务处理场景补充说明：
iPhone4，iPhone3，iPhone等都是普通屏，5/5s/5c,6/6s,7都是2倍屏，6p/6sp/7p是3倍屏，一般都是使用2x 或 3x图片适配
1）为什么1倍DPI也使用2x图片？
因为图片缩小不会模糊
2）既然缩小不会模糊，那为什么不全部使用3x图片？
为了提高性能, 如果图片全部使用3x图, 提高了手机流量的消耗, 而且页面加载速度也会大打折扣
3）假如我在屏幕上需要展示一张 20px * 20px 大小的图片，那么设计师应该怎么给我图呢？
如果屏幕是 2倍屏，那么就需要提供 40px * 40px 大小的图片，如果屏幕是 3倍屏，那么就提供 60px * 60px 大小的图片。
