物理像素 逻辑像素 DPR理解 及移动端border 1px问题

像素：

【像素 pixel】是图像显示的基本单位，表示“图像元素”。

ppi:

【ppi】是屏幕上每英寸可以显示的像素（点）的数量，即屏幕像素密度。

像素的分类：

1.设备像素（物理像素）：设备屏幕的物理像素，在同一个设备上，它的物理像素都是固定的。

2.css像素（逻辑像素）：是为web开发者创造的，在CSS和javascript中使用的一个抽象的层。

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

设备物理像素：window.devicePixelRatio

设备逻辑像素：document.documentElement.clientWidth

DPR：

【DPR】为设备像素比，即物理像素与逻辑像素比，

在某一方向上：

DPR = 设备像素 / CSS像素

如iphone8,css像素为375px677px,dpr是2，设备像素是750px1354px。1个逻辑像素占4个物理像素 （4个物理像素来显示1个css逻辑像素）。

关于移动端border 1px 变粗的问题：

在dpr为2或3时，如750设计稿上1px实为物理像素1px，但border：1px 最终渲染出来是却是1*dpr设备像素，所以看起来比设计稿粗