vue lib-flexible适配方案

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。

一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。以下为它在vue中的使用。

1、安装 lib-flexible

npm install lib-flexible --save-dev

2、引入 lib-flexible 在main.js中引入lib-flexible

// px2rem 自适应
import 'lib-flexible'

3、安装 px2rem-loader

npm install px2rem-loader --save-dev
npm install postcss-px2rem --save-dev

4、配置 px2rem-loader

在项目根目录新建文件vue.config.js，然后如下配置：

//老版本
module.exports = {
    lintOnSave: false,
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};
//新版本
module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
      config.module
      .rule('css')
       .test(/\.css$/)
       .oneOf('vue')
       .resourceQuery(/\?vue/)
       .use('px2rem')
       .loader('px2rem-loader')
       .options({
        remUnit: 75
       })
    },
};

//删除index.html里meta标签，会自动添加meta标签

5、大屏的适配

如果我们要适配大屏，还要对lib-flexible进行修改，找到源码打开./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;
}

从此段源码中我们不难看出，当屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540这个特定值的时候，那么就不再进行适配了。那么我们如何解决这个问题呢？

在上述源码中，进行修改。例如我要适配的大屏幕尺寸是基于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;
}