关于物理像素、逻辑像素、设备像素比看这个就够了

设备像素/物理像素(device pixel):

设备像素是物理概念，指的是设备屏幕上的像素点个数，比如iPhone 5的分辨率640 x 1136px，那么水平方向上有640个像素点，竖直方向上有1136个像素点。

CSS像素(css pixel):

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
以iPhone 5为例：通过浏览器模拟移动端开发时选择iPhone 5设备，如下图1所示可以看到此时的宽高分别为320px*568px，也就是每个方向上一个物理像素包含2个css像素(如图2)：

image1
iamge2

逻辑像素(dp,pt)

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt（point）与dp(device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。下面我们以iPhone 5为例
逻辑像素设定为320x568pt（实际像素:640x1136px）,以物理屏幕左上角为原点,横向X轴320pt,纵向Y轴480pt。所以PPI越高，1pt的所覆盖的物理像素就越多。如果不是很理解逻辑像素的概念，就等同于CSS像素即可。

像素密度ppi(Pixels Per Inch):

像素密度，准确的说是每英寸的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。
计算公式：

image.png

设备像素比dpr(Device Pixel Ratio):

dpr = 物理像素/逻辑像素

在移动端开发中，一般通过rem,vh, vw, rpx等相对单位进行移动端的适配，因此了解像素比概念是非常有必要的，有助于深入理解相对单位换算的原理。