vue移动端适配

1、安装 lib-flexible

npm install lib-flexible --save-dev

2 、引入 lib-flexible

// 在main.js中引入lib-flexible
import 'lib-flexible'

3、安装 px2rem-loader

npm install px2rem-loader --save-dev

4、配置 px2rem-loader

// 在项目根目录新建文件vue.config.js，然后如下配置：
module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};

5、大屏修改

// 打开./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;
}
// 例如我要适配的大屏幕尺寸是基于3840的设计稿，而要求最小范围是1980，最大为5760，那么我们要修改的则变为：
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr < 1980) {
        width = 1980 * dpr;
    } else if (width / dpr > 5760) {
        width = 5760 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

完