定义
像素（pixel）是图像显示的基本单位。在网页中，一个像素就是计算机能够显示一种特定颜色的最小区域。
当设备尺寸相同但像素变的更密集时，屏幕能显示的画面的过渡更细致，大致像下面这样
ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度
分类
像素可以分为设备像素和CSS像素
设备像素（device independent pixels）： 设备像素也叫物理像素，任何设备的物理像素是固定不变的。比如我的笔记本的分辨率是1366 * 765，表示的就是宽度上最多容纳1366个物理像素点，高度上最多容纳765个物理像素点
CSS像素（CSS pixels）：CSS像素也叫逻辑像素，是为web开发创造的。通常情况下，在桌面端，CSS像素的大小和设备像素的大小是相等的，即一个CSS像素完全覆盖了一个设备像素，图片表示如下
但是在手机端，我们都知道网页可以通过手指进行缩放，这时候CSS像素也会改变
当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素
图中深蓝色表示设备像素，半透明的浅蓝色表示CSS像素
当用户进行放大操作时，一个CSS像素覆盖了多个设备像素
DPR
DPR（devicePixelRatio）指的是设备像素比，即网页在不进行缩放使，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
其实，在早先的移动设备中是没有DPR这个概念的，随着技术的发展，移动设备的屏幕像素密度越来越高，就出现了DPR这个概念。
从iphone4开始，苹果公司推出了retina视网膜屏幕，这种技术在屏幕大小不变的情况下，屏幕像素密度提高了一倍，分辨率自然也提高了一倍，于是DPR等于2
通过JS的screen.width和screen.height属性，可以获取屏幕的CSS像素
通过JS的window.devicePixelRatio属性，可以获取屏幕的DPR值
以iphoneX为例，css像素为375px * 812px，DPR是3，可以计算出设备像素是1125px * 2436px
屏幕尺寸
屏幕尺寸也是一个比较常见的概念，它指的是屏幕对角线的长度。比如iphone6 Plus的屏幕尺寸是5.5英寸，指的是屏幕的对角线的长度是5.5英寸长
1英寸 = 2.54厘米
屏幕分辨率
屏幕分辨率就是设备像素，一般以纵向像素 * 横向像素来表示分辨率。比如iphoneX的设备像素是1125px * 2436px，分辨率也就是1125px * 2436px
DPI和PPI
DPI(Dots Per Inch)是印刷行业中的术语，表示打印机每英寸可以喷的墨汁点数。计算机显示设备借鉴了DPI的概念，PPI(Pixels Per Inch)表示的是每英寸的像素数量，即像素密度（Screen density）。
在计算机显示设备中，可以认为PPI和DPI是一样的，都是代表屏幕像素密度
(PPI或DPI) = 对角线分辨率 / 屏幕尺寸
