H5 rem适配

记录下使用VUE开发H5适配方法

 

第一步：

安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

 

第二步：

在项目根目录下添加.postcssrc.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
      minPixelValue: 2
    }
  }
}

 

第三步：

动态设置根字体大小，js插入在head里面。

(function() {
      function autoRootFontSize() {
          document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
      }
      window.addEventListener('resize', autoRootFontSize);
      autoRootFontSize();
    })()