vue-cli3中安装lib-flexible和px2rem

先安装

npm i lib-flexible postcss-px2rem  --save

然后再main.js中

import 'lib-flexible'

由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个meta name=“viewport” 标签删除或注释！！！

配置postcss-px2rem
创建vue.config.js,再文件中写

 css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },

当然他默认的尺寸可能不满足我们的需求,可以修改源码，打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：

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;
}

将他修改为你想要的尺寸,例如我们要求最小范围是1020px，最大为1820px，那么我们要修改的则变为：

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