移动端 h5 自适应解决方案

vue移动端 h5 自适应解决方案的实现方式其实和原生设置的方式差不多，虽然网上有提供插件的形式比如postcss-plugin-px2rem等但是从实现的效果来看有点不尽如意，下面来看一下如何不引用插件实现rem布局

首先创建rem.js,编辑一下内容

(function (document, win) {

  var docElement = document.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

      var clientWidth = docElement.clientWidth;

      if (!clientWidth) return;

      docElement.style.fontSize = 50 * (clientWidth / 375) + 'px';

      console.log(docElement.style.fontSize)

    };

  if (!document.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  document.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

接下来直接在main.js中引入rem.js就可以了