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。