vw，vh，px，%，em，rem，rpx，upx

px

即pixel(像素)的缩写，css最常用单位。
优点是比较方便，快捷。
缺点是没有弹性，不能适配。

em

相对长度单位，它是相对于父元素font-size的
优点是段落首行缩进2字符时，不需要进行计算
缺点是只要父元素font-size改变，子元素也会随之发生改变，后期进行修改时影响较大。

rem

也是相对长度单位，与em不同，它是相对html font-size的
优点是移动端使用极其方便，不需要写多套代码去适配各种端口
缺点是需要计算

百分比（在布局上称其为百分比布局或者流式布局）

是相对父元素大小的
优点是不需要精确算出
缺点是不易控制，需要较好的估算能力

vw

即viewport width（视口宽度）相对视口（视口：浏览器窗口的大小的单位）
1vw=1%视口宽度即100vm=1可视视口宽度

vh

即viewport height（视口高度）相对视口
1vh=1%视口高度即100vh=1可视视口高度

vw，vh缺点是不是所有浏览器都兼容

rpx

微信小程序 推荐使用自适应单位
将屏幕均分为750份所以一个屏幕的总宽度是750rpx

基本等式：设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度

upx

划分规则、基本等式、换算公式都与rpx相同
uniapp之前的推荐使用单位，现在推荐使用rpx
原因是：upx在动态绑定时无法被准确编译，需要使用uni.upx2px
转化一下被很多开发者所吐槽，官方接收到讯息后做了改动在app端和h5端都做了rpx的支持