1、px 和 pt ,rpx
px：就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
pt：point，磅，是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
rpx: 是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配
譬如iphone6，屏幕宽度为375px ，共有750个物理像素，则1rpx = 0.5px。
2、rem 和 em
em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。
em 和 rem 如何转化像素值
rem：取决于页根元素的字体大小，根元素字体大小乘以你 rem 值
em：像素值将是em值乘以使用em单位的元素的字体大小（注意：不是相对于父元素的字体大小，父元素的字体大小可以影响 em 的值，这种情况的发生，纯粹是因为继承。）
3、vh 和 vw
vh：1vh 等于1/100的视口（viewpoint）高度
vw：假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。
4、vmin 和 vmax
vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。
5、%（百分比）
一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
6、ex 和 ch
ex 和 ch 单位，类似于 em 和 rem, 依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。
ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。
这个单位的传统用途主要是盲文的排版。
参考链接：
https://www.webhek.com/post/7-new-css-units.html
https://www.runoob.com/cssref/css-units.html
