vue3 自适应布局

第一步安装两个依赖包。
npm i lib-flexible postcss-px2rem -S

第二步在main.js中加入以下代码。
import 'lib-flexible'

第三步在index.html中注释以下代码，因为lib-flexible包会自动加入。

第四步在与package.json同级目录下创建vue.config.js文件，输入以下代码。

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 150 //设计图宽度大小/10之后的数值
                    })
                ]
            }
        }
    },
}

remUnit的数值设置为设计图宽度 / 10的大小，比如设计图宽度为1920px，则remUnit设置为192;设计图宽度为750px，则设置为75；

注意：开发时，正常使用px即可，项目会自动转变成rem。

因为lib-flexible是写死的，所以如果在pc端(>750px)时，要修改一下flexible.js的refreshRem方法才能生效。直接复制下面的代码替换掉原本文件的方法即可。

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