-
Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
-
Pt磅 点 打印的尺寸
-
Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级）
-
Rem相对单位，相对于根元素html的font-size 1rem=根元素的font-size，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号16px,所以默认1rem=16px,当然具体还要看你给根节点设置为多少，font-size=100px,那么就是1rem=100px啦
-
Vw，相对于屏幕的宽度 ，1vw==1%屏幕的宽度
-
Vh 相对单位，相对于屏幕高度，1vh==1%屏幕的高度
CSS版
假如ui图的宽度为1920px，又因为vw会把宽度分为100份，那1vw=19.2px，1920/100=19.2（px），现在这样还是不行，不好算，那就算出每100px是多少vw，(100/19.2)*1=(约等于)5.21（vw），这样，设根字体html为5.21vw，则0.18rem=18px（1rem=100px）
Html{font-size:5.21vw;} 100px=1rem=5.21vw 量的尺寸是90px
100px=5.21vw font-size:100px; 1rem=100px font-size:5.21vw
当然这里为了好计算，算的是每100px是多少vw,对应的在使用时候，比如给div设置widh:100px，就可以直接写成1rem啦。你也可以算成每10px是多少vw，widh:100px，就可以直接写成10rem
JS版
720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等
window.onresize = function () {
getRem(640, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
总结
**1.**Vw结合rem适配
1.设计稿的尺寸=100vw。算出1vw=？Px；
2.算出100px=？？Vw；
3，html{font-size:？？vw}这时1rem=100px
4.量出的尺寸除以100，就是得出的rem单位的值
2.Js适配
1.引用js；注意修改js中的一个参数，参数值设置成设计稿的尺寸
2.直接1rem=100px;量出的尺寸除以100，就是得出的rem单位的值
