px
像素，pixel的缩写。
作用：px设置固定的布局或者元素大小
rpx
rpx (responsive pixel)
微信小程序解决自适应屏幕尺寸的尺寸单位
微信小程序规定屏幕的宽度为750rpx。
解释：将屏幕的宽度分为750份，1份就是1 rpx
em
参考物：父元素的font-size
如果自身定义了font-size，按自身计算。整个页面内1 em不是固定的值。
特点：
1.em的值不是固定的
2.em继承父级元素的字体大小
rem
参照物：根元素html
只需在根元素确定参考值，可以设计HTML为大小为10px，则设置1.2rem表示12px。
优点:只需设置根目录的大小就可以将整个页面成比例的调好。
%
一般来说，相对于父元素
- 普通定位元素就是相对于父元素
-
position: absolute的元素相对于已定位的父元素 -
position: fixed的元素相对于Viewport（视口）。
vw
- CSS3新单位
- Viewport Width的简写，指可视窗口的宽度。
- 视口的宽度为1200px的话，100vw等于1200px，10vw等于120ox，以此类推
- 假设，浏览器宽度为1200px，1vw = 1200px / 100 = 12px
vh
- CSS3新单位
- Viewport Height的简写，指视口的高度。
- 视口的高度为1200px的话，100vh等于1200px，10vh等于120ox，以此类推
- 假设，浏览器宽度为900px，1vw = 900px / 100 = 9px
vm
- CSS3新单位
- 相对于视口的宽度或高度较小的那个。
- 其中最小的那个被均分100份的大小就是
1 vm - 假设，浏览器高度为800px，宽度为1000px，则1vm = min(800, 1000)px / 100 = 8px
- 兼容性较差，不建议使用
补充内容
Viewport 视口
pc端，Viewport指的是浏览器的可视区域
移动端，涉及3个视口：Layout viewport（布局视口）、Visual viewport（视觉视口）、Ideal viewport（理想视口）。Viewport指的是其中的Layout Viewport。
根据CSS3规范，视口单位包括以下4个
-
vw:
1 vw等于视口宽度的1% -
vh:
1 vh等于视口高度的1% -
vmin: 选取
vw和vh中最小的那个 -
vmax: 选取
vw和vh中最大的那个
