flexible可视化大屏适配方案 Jim

一、lib-flexible是什么？

lib-flexible会自动在html的head中添加一个 meta name="viewport"的标签，
同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
假如设计稿的宽度是750px，此时1rem应该等于75px。
假如某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是  2rem。
但是当分辨率大于某个特定值时，它便不再生效。
dpr=物理像素 / 设备独立像素

1、移动端适配：

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

01、安装 lib-flexible

npm install lib-flexible --save-dev

02、引入 lib-flexible

在 main.js中引入lib-flexible

import 'lib-flexible'

03、安装 px2rem-loader

npm install px2rem-loader --save-dev

04配置 px2rem-loader

分两种情况：

• vue-cli 2.x
• vue-cli 3.x

　　　　0.1、vue-cli 2.x版中在build/utils.js中，找到exports.cssLoaders，作出如下修改：　　　

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUint: 75 // 以设计稿750为例， 750 / 10 = 75
    }
}　　

　　　　0.1.1、继续找到generateLoaders中的loaders配置，作出如下配置：　　

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

　　　　0.2、3.x版本。由于3.x版本需要自己配置，在项目根目录新建文件vue.config.js，然后如下配置：

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

配置好，重新启动

npm/yarn run dev/serve

2、PC端/大屏适配：

按照移动端配置可能会有问题哟!!!

例如我们屏幕尺寸要做以3840 x 2160为设计稿的适配，那么我们的remUnit的值则改为384。然后呢？重启项目，发现……咦？布局全部乱掉！经过排查，自己的代码基本上不会导致该问题的出现，那么只能是源码在作怪了。重点来了。

找到源码打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：

在flexible.js文件下找到refreshRem()方法：

function refreshRem(){
        let width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540* dpr;
        }
        let 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;
}
重启就好

切记在每次初始化 npm i 时，以上配置都要重新配置切记！切记！切记！

案例 http://8.135.114.187/sandaoh5/sandao/index.html#/

 

还需要将px自动转化为rem   

npm i postcss-plugin-px2rem --save -dev

引入 postcss-plugin-px2rem

然后在vue-config.js中的loaderOptions配置如下

postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                        // propBlackList: [], //黑名单
                        exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        // selectorBlackList: [], //要忽略并保留为px的选择器
                        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }