关于 物理像素 逻辑像素 css px 的一些个人看法

px/rem/rpx 相对长度单位
px:pixel 像素，显示设备上最小的显示单位，物理设备的最小（度量）单位，相对单位（分辨率越高，视觉上呈现的越小）
pt:point 点，磅值，印刷行业常用单位，计量印刷物品尺寸的最小（度量）单位，大小为1/72英寸
dpr(device pixel ratio 设备像素缩放比)：设备物理像素和设备独立像素的比例，即：devicePixelRatio = 物理像素 / 独立像素。
window.devicePixelRatio 可以获取当前设备的dpr
rem: root em 相对于html根元素的字体大小，如果html上的字体大小是10px,1rem就等于10px，默认是1rem=16px
em: 是相对于父元素的字体大小
rpx：是微信小程序解决自适应屏幕尺寸的尺寸单位，小程序规定的屏幕宽度是750rpx
DPI : 每英寸的像素点数

<meta name="viewport" width="device-width">的含义就是将视口设置为：CSS像素=物理像素

物理像素（因为是与设备有关，所以叫物理）
含义: 设备能控制显示的最小单位，常说的1920×1080像素分辨率就是用的设备像素单位，单位是px，这里的px不同于css px。

逻辑像素（因为是与内容有关，虚拟的，所以叫逻辑）,也称为设备独立像素(Device Independent Pixel,DIP)，单位是pt。
含义: 设计稿的参考尺寸，iOS使用Sketch和 AdobeXD软件设计界面使用的单位都是PT。
windows(默认DPI是96)中：1pt=1px*3/4。

关于css px的个人理解：
css px是抽象的，人为设计出来的东西，和物理像素本来就不是一一对等的。
刚开始的时候 1px的确对应1 device pixel，不过随着高清屏技术的发展，它和物理的不再对等了。
所以后来人们设计出物理像素和逻辑像素的概念，用物理像素指代原来的px，用逻辑像素指代pt。
照现在的理解就是，css 1px 表示1px的内容用设备上多少个物理像素去显示，也就是dpr（物理像素/逻辑像素比）。
我想这也是为什么网上很多帖子直接把逻辑像素看作css px 的原因。
比如iphone 6（dpr:2 @2x）上，100*100的图片，样式要写作50*50，如果写成100*100图片就会模糊。
反正如果设计稿如果是用ps按750*1334尺寸设计的，在2倍屏上适配，用css描述时除以2就是了。
*其实 css 1px 并不等同于1pt，至少window系统中不能，window中1px=0.75pt。