Vue使用flexible 解决移动端适配问题

都8012年，才写这篇文章，好像看起来有点班门弄斧了。当整理整理资料，让本小白攻城狮做下记录，有空可以翻翻：>。

npm i postcss-pxtorem --sav-dev

Vue2.X版本脚手架搭建项目，根目录下存在一个.postcssrc.js文件 

postcdd-pxtorem 配置

新增图片红色标注中的代码

rootValue 基数；

例：rootValue为100 则1px转换为0.01rem

propList为需要转换单位的目录路径，可添加多个路径。

倘若默认为整个项目，则值为：propList:["*"]

区别目录进行单位转为主要是因为，项目中引入了其他的UI组件样式库，由于这些UI组件库本身就针对移动端，如若再次转换单位，会使得UI组件样式整体缩小。

flexible库，通过npm安装后，在入口文件main.js中import即可。

*postcss-pxtorem忽略单个属性

不识别0.01rem问题,忽略postcss-pxtorem规则，将px书写为‘Px’或‘PX’

// `px` is converted to `rem`

.convert {

    font-size: 16px; // converted to 1rem

}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers

.ignore {

    border: 1Px solid; // ignored    

    border-width: 2PX; // ignored

}