在移动端大行其道的环境下，终端适配成为不可或缺的技能。因此将px转化rem的目的就是为了更为适应广泛的各个终端设备。前端工程发展到至今，项目工程化、模块化的开发成为主流，省却了手动转化的人力成本，使得开发更具效率化、人性化。
px转rem方案：postcss-pxtorem、postcss-loader
安装postcss-pxtorem、postcss-loader为开发依赖。
npm install postcss-pxtorem postcss-loader -D
根目录下添加postcss.config.js。配置postcss如下图：
配置前，如图所示
配置后
npm安装包管理中，postcss-pxtorem参数如下:
{ rootValue: 16, unitPrecision: 5, propList: ['font', 'font-size', 'line-height', 'letter-spacing'], selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 0, exclude: /node_modules/i}
参数说明：
-
rootValue（Number|Function）：表示根元素的字体大小，或者根据函数方法输入参数返回根元素字体大小
-
unitPrecision（Number）：转化为rem后是否保留几位小数
-
propList（Array）：存储将被可以转化成rem的属性列表
-
匹配精确属性写法：['font', 'font-size', 'line-height', 'letter-spacing']
-
匹配全部属性：['*']
-
在单词的开头或结尾使用* ：['position']在position的前后加*只匹配背景图位置的数据转化为rem
-
使用“!”，排除属性： ['*', '!letter-spacing']
-
selectorBlackList(Array)：过滤css类的数组，匹配到数组中的元素的类，样式将不被转化成rem。两种写法：
-
['body']匹配到如.body-class等类名的样式中px不转化为rem
-
正则写法[/^body$/]此写法只匹配body而不是.body
-
-
replace（boolean默认为true）：转化后是否由包含rem规则的样式替换包含px的样式。区别可在浏览器中查看。前后对比如下图
-
mediaQuery（Boolean）：允许在媒体查询中转换px
-
minPixelValue（Number）：设置最小替换像素值，小于这个值则不转换成rem
-
在一些特殊情况下不希望px转化为rem。例如宽度为1像素的边框，可以如下写法：
border-top: 1PX solid #f4f4f4;
-
-
exclude（String|Regexp|Function）：忽略并保留px的文件路径
-
String写法：它检查文件路径是否包含该字符串。如：'exclude'-> \project\postcss-pxtorem\exclude\path
-
正则写法： 则检查文件路径是否与正则匹配。如：/exclude/i-> \project\postcss-pxtorem\exclude\path
-
函数写法：使用函数返回true，文件将被忽略，函数返回一个布尔值。如：function (file) {return file.indexOf('exclude') !== -1}
-
-
如果在项目引入插件，且需要对插件的根节点字体需要单独设置大小，修改配置如下：
module.exports = ({ file }) => { let rootValue = 32 if (file && file.dirname && file.dirname.indexOf('vant') > -1) { rootValue = 16 // 对vant单独设置了根元素字体大小 } else { rootValue = 32 } return { plugins: { autoprefixer: { overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7', 'Firefox >= 20', 'ie >= 8'] }, 'postcss-pxtorem': { rootValue: rootValue, propList: ['*'], minPixelValue: 1 } } }}
更多详细配置移步官网：www.npmjs.com/package/pos…
