超硬核前端众单位计算方式，自适应响应式爱好者必看
作者：互联网
px
这个单位在实际开发中也会用到，但他是无法实现一个屏幕的适应的
计算方式 1px = 1个橡树点
每个屏幕的像素点都是不一样的，大屏幕台式机可能有两千多像素点，小屏幕手机几百橡树点的也很多 所以用px写的页面 除非掺杂其他单位 否则很难适应所有屏幕
in
in 是一种很少见的字体单位，老实说做了这么久开发我也基本没见过谁用这个单位的
计算方式 1in = 1英寸 即2.54厘米
显然也是一种无法适应的单位
cm
也是一种很少见的单位，完全没有在项目中看见过
计算方式 1cm = 1厘米 即 0.394英寸
也是一种不建议使用的单位 无法适应屏幕
mm
又是一个少见的单位 没什么人用
计算方式 1mm = 1毫米 即 0.1厘米
基本没什么用 知道有这个东西就行了
pt
打印的点数，多用于打印功能，页面布局不会用 做打印功能可能会看到
计算方式 1pt = 1磅 72磅 = 1英寸
打印功能时可能会见到 但也基本不用
em(移动端常用)
移动端多见的字体单位，按百分比获取父元素字体大小
计算方式 1em = 父元素font-size 值的百分之百
0.8 0.9em的写法也很常见 就是获取父元素字体大小的百分之八十 九十
rem(响应式常用)
按百分比获取根节点字体大小，用法类似于em 根节点就是 最底部的标签，网页的HTML标签 小程序的 Page
计算方式 1rem = 根节点font-size的百分之一百
PC和手机端都比较常用
rpx(小程序 nui-app常用)
是一种根据屏幕宽度自适应计算的单位，PC端设置此单位无效
计算方式 多大的屏幕宽度都只会有 750rpx 也就是说 1rpx = 屏幕宽度的七百五十分之一
小程序中rpx超好用
vh(PC端常用)
根据百分比获取屏幕高度
计算方式 1vh = 屏幕高度的百分之一
PC端开发超好用
vw(PC端开发常用)
根据百分比获取屏幕宽度
计算方式 1vw = 屏幕宽度的百分之一
PC端开发超好用
%(很常见)
百分比可以说基本布局都会用到
当你把宽度设置百分比 就会按百分比获取父元素宽度
设高度 则按百分比获取父元素高度
计算方式 百分比获取父级单位
超好用
标签：百分比,方式,必看,爱好者,单位,PC,计算,屏幕,硬核 来源： https://blog.csdn.net/weixin_45966674/article/details/121585157