像素:
【像素 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设备像素, 所以看起来比设计稿粗