pt、px、rpx、em、rem到底是什么

web单位总结


pt、px、rpx、em、rem这几个单位到底是什么玩楞,一会儿用这个一会儿用那个到底是为什么。为了解答自己心中的这个问题,今天就来好好总结一下他们到底是什么,各自应当用在什么场景。

px和pt

dpi(ppi): 屏幕对角线上每英寸像素点个数,越高屏幕就越清晰。
pt: 标准长度单位 1pt=1/72英寸 。
px: 物理像素点 1px=1/(屏幕dpi)英寸,windows默认为96dpi,再此条件下px=3/4pt。
px是物理像素点的个数,长度是根据屏幕的dpi来变化的,也就是说不同分辨率下px是不一样大的。比如一张100px*100px的图片在两个屏幕面积相等而分辨率不同等屏幕上,低分辨率上占屏幕的1/8而在高分辨率上可能只占1/10。

rpx

适用于微信小程序,微信小程序规定所有屏幕的宽度均为750rpx,而在iphone6屏幕下 1px=2rpx,所以一般设计稿都以iphone6为基准,在不同机型中显示效果都会相同。

em和rem

如果想实现随着屏幕大小进行自适应的话,可以使用em和rem具体可看这篇博客web自适应方案
em: 相对于父类css的font-size单位的百分比,浏览器默认font-size为16px,此时1em = 100%*16px。需要注意的是em是相对于父级的,比如divA中包了一个divB,divA中使用0.5em是8px,在divB中使用0.5em就是4px了。
rem: 与em相似,也是百分比,rem是相对于html标签的font-size百分比,所以只需设置了html标签的font-size即可使用rem啦。

猜你喜欢

转载自blog.csdn.net/qq_42199786/article/details/104084034