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

2024-05-30 17:45:37

web单位总结

px和pt
rpx
em和rem

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啦。

pt、px、rpx、em、rem到底是什么相关推荐

css中单位px和em,rem的区别
1.PX 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. ...
彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
px，em, rem的区别，在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
总结css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
px rpx pt em rem单位
一. rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 如在 iPhone6 上,屏幕宽度为375px,共有 ...
混合app用百分比还是rem_一次搞懂前端所有CSS长度单位，px、em、rem、rpx、%....
前端就是一个大杂烩,做为前端工程师需要掌握的知识点太多了.各种长度单位需要我们去了解除了这些还有印刷单位 pt pc pt cm mm in.... 毫无疑问现在统治前端的长度单位还是px, 一个相 ...
CSS中那些px、em、pt、rem、%、dp（android）单位
http://blog.csdn.net/ime33 未经允许,不得转载!! 水平有限,写的不周之处欢迎指正.交流! 在前端开发中,遇到单位的时候会有几种选择,那到底用哪种单位才是最合适的呢? 在国内 ...
CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
CSS中大小单位px，em，rem 以及微信小程序的rpx
CSS中可以定义大小的单位有四种px,em,rem 以及微信小程序的rpx . 2017-05-25 px - 像素(Pixel).相对长度单位.像素px是相对于屏幕分辨率而言的. em - 相对长度 ...

最新文章

热门文章