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;
}

代码截图