Vue 使用lib-flexible适配PC端（rem）

安装lib-flexible与postcss-px2rem

npm install lib-flexible
或
yarn add lib-flexible

代码直接使用rem单位不方便阅读，安装postcss-px2rem插件可以自动把px转成rem

npm install postcss-px2rem
或
yarn add postcss-px2rem

使用及配置

在 main.js中直接引入lib-flexible

import "lib-flexible";

在vue.config.js中配置css

css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          //remUnit这个配置项的数值根据设计图来定这个值，便于开发。
          //假如设计图给的宽度是1920，按照24等份来划分(1920/24),remUnit设置为80(1rem = 80px)
          // 需要去改lib-flexible源码(node_modules\lib-flexible\flexible.js  69行refreshRem()函数)
          require("postcss-px2rem")({
            remUnit: 80,//1rem = 80px
          }),
        ],
      },
    },
  },

修改lib-flexible的源码

在node_modules依赖文件中找到flexible.js，修改 refreshRem() 函数。
(node_modules\lib-flexible\flexible.js 大概在69行的refreshRem()函数)

        /**
           * lib-flexible源码 修改前 
           */
          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;
          }
          /**
           * lib-flexible源码 修改后 
           */
            function refreshRem(){
              var width = docEl.getBoundingClientRect().width;
              if (width / dpr > width) {
                  width = width * dpr;
              }
              var rem = width / 24;
              docEl.style.fontSize = rem + 'px';
              flexible.rem = win.rem = rem;
          }
          或
          function refreshRem(){
              var width = docEl.getBoundingClientRect().width;
              //屏幕大于1920 小于5760 时
              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;
    }

注意：
行内样式设置的px无法被转换成自适应的rem。
lib-flexible给body元素加上了12px的字体大小。
官方解释：body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有设置font-size的元素会继承html上的font-size，变得很大。
如果不需要body加字号，可去源码中进行注销：
// if (doc.readyState === 'complete') {
// doc.body.style.fontSize = 12 * dpr + 'px';
// } else {
// doc.addEventListener('DOMContentLoaded', function(e) {
// doc.body.style.fontSize = 12 * dpr + 'px';
// }, false);
// }

测试

设置字体为40px

.home {
  font-size: 40px;
}

在1920宽度展示：

1920

在960宽度展示：

960