vue使用lib-flexible实现适配

注：行内样式设置的px无法被转换成rem

1、安装

npm install postcss-plugin-px2rem lib-flexible --save

2、main.js中引用

import "lib-flexible";

3、vue.config.js中配置

css: {
    // 启用 CSS modules
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            //假如设计图给的宽度是1920，按照24等份来划分(1920/24),remUnit设置为80(1rem = 80px)
            rootValue: 80, // 换算基数， 默认100
            exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            mediaQuery: true, // （布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  }

4和5可不建议进行配置，毕竟是改依赖 ！！！

4、找到  node_modules\lib-flexible\flexible.js   文件，改变 refreshRem() 方法

//修改前
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;
    }

//修改后
function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 1920) {
            width = 1920 * dpr;
        }else if(width / dpr > 5760) {
            width = 5760 * dpr;
        }
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

5、字体问题

lib-flexible在body元素中加上了字体大小 => 12px

官方解释：body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有

设置font-size的元素会继承html上的font-size，变得很大

如果不需要body加字号，可去源码中注释掉 （  node_modules\lib-flexible\flexible.js  文件中）

//将这段代码注释掉
if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 14 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 14 * dpr + 'px';
        }, false);
    }

//注：因我自身需要使用，所以将12 改成了 14