都8012年,才写这篇文章,好像看起来有点班门弄斧了。当整理整理资料,让本小白攻城狮做下记录,有空可以翻翻:>。
npm i postcss-pxtorem --sav-dev
Vue2.X版本脚手架搭建项目,根目录下存在一个.postcssrc.js文件
新增图片红色标注中的代码
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
}