基本概念
PX(css pixels)
虚拟像素，可以理解为“直觉”像素，
CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px.
DP(device pixels)
设备像素（物理像素）顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt.
DIP(Device independent Pixel)
设备独立像素，也称为逻辑像素，简称
dipCSS像素 = 设备独立像素 = 逻辑像素
DPR(device pixels ratio)
设备像素比dpr 描述的是未缩放状态下，
物理像素和CSS像素的初始比例关系dpr = 设备像素 / css像素
dpr = 屏幕横向设备像素 / 理想视口的宽
参考像素
参考像素即为从一臂之遥看解析度为
96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角.
通常认为常人臂长为28英寸，所以它的视角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度
图片来源：https://github.com/jawil/blog/issues/21
PPI(pixels per inch)
每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况.
DPI(dot per inch)
dpi：每英寸多少点
参考
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
MDN/window.devicePixelRatio