vue项目中使用rem进行适配布局

1.新建一个rem.js文件复制以下代码到js文件中

(function (window, document) {
    let rootVw = 750;
    function resize() {
      var ww = window.innerWidth;
      if (ww > window.screen.width) {
        window.requestAnimationFrame(resize);
      } else {
        if (ww > rootVw) ww = rootVw;
        document.documentElement.style.fontSize = ww / rootVw * 100 + 'px';
      }
    }
    if (document.readyState !== 'loading') {
      resize();
    } else {
      document.addEventListener('DOMContentLoaded', resize);
    }
    window.addEventListener('resize', resize);
  })(window, document);

2.将rem.js在vue项目中的入口文件main.js中引入文件

import './util/rem.js'//根据自己放置的文件夹下的正确路径（我放的是util文件夹下的）

3.页面就可以正常的使用rem布局了（注意：1px=0.02rem）,假如你ui上字体是16px 的话就是0.32rem