前端像素大全

一。px

又称虚拟像素，是css像素的单位。他是一个相对单位，相对于设备像素而言的。

px具有两个相对性，其一，相对于同一设备一个css像素可变；其二，相对于不同设备，一个css像素可变。

默认情况下一个CSS像素应该是等于一个物理像素的宽度，在浏览器中的放缩操作，相当于把一个css像素放缩为你的浏览器放缩倍数乘以一个物理像素的宽度。

*PS:  CSS像素只是一个相对值。

二。DP

又称设备像素（物理像素），单位是pt（ 1pt = 1/72(inch) ）。

显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

DPR （设备像素比）= 设备像素/CSS像素。即dpr个设备像素等于一个css像素。

三。DIP

又称逻辑像素（设备独立像素）。

CSS像素 =设备独立像素 = 逻辑像素

四。DPR

设备像素比（dpr 描述的是未缩放状态下，​

​物理像素​

​​和​

​CSS像素​

​的初始比例关系

1.与设备像素，css像素的关系

dpr=设备像素/css像素

2.与视口的关系

dpr=屏幕横向设备像素/理想视口的宽

PS：设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。