H5移动端开发 之 rem适配

1.安装插件 postcss-pxtorem， postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

npm i postcss-pxtorem --save-dev 

 2.根目录下新建postcss.config.js文件 在postcss.config.js文件中配置

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75; // 设计稿宽度是750 就设置75 如果是640 就设置64
      },
      propList: ['*'],
    },
  },
};

3.安装插件 lib-flexible, 该插件会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如某个元素宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

npm i lib-flexible --save 

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

import "lib-flexible"

5.解决最大根字体为54px

找到node_modules 下的 lib-flexible文件 搜索 refreshRem 把条件语句注释掉即可

   function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }