手写rem适配

第一种:手写rem

<script>
	// 封装一个根据屏幕尺寸自动改变html的font-size大小的函数
function rem() {
    //  获取html的宽度
    let htmlW = document.documentElement.clientWidth;
    // 获取body的宽度
    let bodyW = document.body.clientWidth;
    // 兼容处理
    let W = htmlW || bodyW;
    // 设置html的font-size大小
    // 因为设计图尺寸是750，所以平分，这样*100之后，1rem就等于100px;
    document.documentElement.style.fontSize = (W / 750 * 100) + 'px';
  }
  // 定义屏幕宽度改变时触发
  window.onresize = function () {
    rem()
  }
  // 设置初始触发一次
rem()
	</script>

第二种: 通过下载依赖

1.安装 lib-flexible和 postcss-pxtorem

npm install lib-flexible --save

npm install postcss-pxtorem --sav

postcss-px2rem :会将px转换为rem用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，即1rem=html标签的font-size值
**lib-flexible:**用于设置 rem 基准值

2.引入lib-flexible
在main.js中引入