vue-cli3.0结合lib-flexible、px2rem实现pc端大屏适配，完美解决第三方ui库样式变小问题

一、项目中安装lib-flexible

 npm install lib-flexible --save

二、在项目的入口main.js文件中引入lib-flexible

 import 'lib-flexible' // 默认将屏幕划分为10等分 （如果设计稿尺寸为1920px, 则 1rem = (1920/10)px;偏大，可以设置24等分，则1rem = (1920/24)px=80px;

第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem

   安装postcss-px2rem-exclude

 npm  install postcss-px2rem-exclude --save

配置exclude选项

配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.json里设置。

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
};

package.json

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
          "remUnit": 75,
          "exclude":"/node_modules|floder_name/i"
      }
    }
  },

PC端大屏设置时要修改flexible.js 为

  function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr; // //当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }