作为一名前端开发，在做移动端适配时rem、vw是我们经常用到的单位，但是我们在实际开发过程中需要将设计稿上的px转换成rem，如果手动去计算，将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。

开始之前，我们先来了解一个概念【PostCSS】

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具，类似babel对js的处理。常见的功能如：

1 . 使用下一代css语法(cssnext)

2 . 自动补全浏览器前缀(autoprefixer)

3 . 自动把px代为转换成rem/vw(postcss-pxtorem/postcss-px-to-viewport)

4 . css代码压缩等等

PostCSS 只是一个工具，本身不会对css一顿操作，一般不单独使用，而是与已有的构建工具进行集成，通过插件实现功能。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。

Webpack 中使用 PostCSS 插件示例：

postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。

言归正传，接下来我们看一下如果使用PostCSS把px自动转成rem、vw

postcss-pxtorem

功能：把px转换成rem

安装：npm install postcss-pxtorem --save-dev

配置项：

'postcss-pxtorem':{

rootValue:100,// html节点设的font-size大小，由于chrome最小12px，所以基值要设置大写

unitPrecision:5,// 转rem精确到小数点多少位

propList:['font','font-size','line-height','letter-spacing'],// 指定转换成rem的属性，支持 * ！

selectorBlackList:[],// str或reg ，指定不转换的选择器，str时包含字段即匹配

replace:true,

mediaQuery:false,// 媒体查询内的px是否转换minPixelValue:0// 小于指定数值的px不转换

}

postcss-px-to-viewport

之前做移动端适配时，基本上是采用rem方案。但随着viewport越来越被大家熟悉，我们似乎发现了一种更好的方案。

功能：将px单位自动转换成viewport单位

安装：npm install postcss-px-to-viewport --save-dev

配置项：

'postcss-px-to-viewport': {

unitToConvert:'px'， //要转换的单位，默认是'px'

viewportWidth: 750,  // 视窗的宽度，对应的是我们设计稿的宽度，一般是750，默认是320

viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置

unitPrecision: 3,    // 指定`px`转换为视窗单位值的小数位数，默认是5

propList: ['*'],    //指定可以转换的css属性，默认是['*']，代表全部属性进行转换

viewportUnit: "vw",  //指定需要转换成的视窗单位，建议使用vw

fontViewportUnit: 'vw',     //指定字体需要转换成的视窗单位，默认vw

selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名

minPixelValue: 1,    // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

mediaQuery: false,     // 允许在媒体查询中转换`px`

replace: true,

exclude: [],   //设置忽略文件，如node_modules

}