为什么要使用PostCss
转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题。然后简单的介绍下。
安装指令
$ npm install @ moohng / postcss-px2vw --save-dev
使用方法
先创建一个.postcssrc.js文件,然后配置
module.exports = {
plugins: {
'@moohng/postcss-px2vw': {}
}
}
例子:
使用前:
.box {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
使用后:
.box{
border: 1px solid black;
margin-bottom: 1px;
font-size: 0.625rem;
font-size: 6.25vw;
line-height: 0.9375rem;
line-height: 9.375vw;
}