作为一名前端开发，在做移动端适配时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
}
网友评论