VueCLI4.x+Vue2.x 使用postcss-px2rem和lib-flexible解决自适应问题 （解决组件样式被修改失效问题）

简介

前端页面移动端免不了需要自适应高度宽度字体大小等等，如果直接写rem的话那会很麻烦，前端还需要根据设计图自己去转rem写样式，那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。

步骤

一、安装组件

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

再main.js中引入

import 'lib-flexible'

安装完成后配置postcss，在这里如果使用在vue.config.js中配置则会导致使用的ui库中的属性也会改变，所以在这里安装的是postcss-px2rem-exclude ，配置文件则在packge.json中。
在packge.json中添加以下内容

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

之后在node_modules->lib-flexible->flexible.js 中将函数refreshRem的内容换成以下内容：

    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;
    }

其他

如果出现字体过小的问题，建议在App.vue的全局样式中设置