postcss-px2rem 安装以及使用

1. 安装 ：
   postcss-px2rem -d
   postcss-pxtorem -d
   px2rem-loader -d
2. 在src 中 创建 utils 文件夹 创建 rem.js
   // 设置 rem 函数 比例为 1：100

function setRem() {
    //  PC端
    console.log('非移动设备')
    const baseSize = 100 // 基准值

    // 相对于1920像素的缩放比 
    let scale = document.documentElement.clientWidth / 1920
    // 根据屏幕变化 1rem 对应的 font-size
    scale = scale > 1 ? 1 : scale;
    const realFont = baseSize * scale
    document.documentElement.style.fontSize = realFont + 'px'

}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
};

3. 新建 vue.config.js

  const px2rem = require('postcss-px2rem')
const postcss = px2rem({
    remUnit: 100 // 基准值
})

module.exports = {
    publicPath: './',
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}

注意：
找到nodejs/llib-flexible/flexible.js 修改代码 如下：

 function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            // width = 540 * dpr;
            width = width * dpr; // 这行代码 pc适配的话 540改为width
        }
        var rem = width * dpr;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }