rem方案自适应适配屏幕
准备工作
1.下载插件lib-flexibl
lib-flexible自动在html的head中添加一个meta name="viewport"的标签，同时自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
github传送门 lib-flexible
2.vscode安装px to rem 插件
插件截图
开始配置
1.项目引入lib-flexibl
<script src="./js/lib-flexible.js"></script>
2.配置px to rem插件
插件配置37.5
假如设计稿的宽度是375px，此时1rem应该等于37.5px。所以在插件中配置font-size默认是37.5（375效果图宽度/10）。
3.使用插件开发页面
在css中填写375效果图的尺寸时，会提示选择对应的rem。
.box{
width: 2.6667rem;
height: 2.6667rem;
}
代码截图
rem实现web端屏幕适配
根据实际效果图（1920*1080）的宽度设置插件的font-size默认是192（1920效果图宽度/10）。
插件配置192
vw方案自适应适配屏幕
插件配置750
vw方案只需要在插件中勾选使用vw的按钮，设置设计稿的尺寸即可，750的设计稿就写750,1920设计稿就写1920。即可完成配置
.box {
width: 13.3333vw;
height: 13.3333vw;
}
代码截图
