我们平时做移动端适配的时候都是用 rem,需要把设计稿的 px 转换为 rem,我一般是用 pxcook 可以自动转换。
今天介绍另一种方法,原理还是把 px 转化为 rem,但是我们是用一个 webpack 插件 postcss-pxtorem自动将px转化为rem,这样我们在css里就可以直接按照设计稿写px了。 github地址
安装
npm install postcss
-pxtorem
-D
在项目根目录建一个文件叫 postcss.config.js,里面写
module
.exports
= {
plugins
: {
'postcss-pxtorem': {
rootValue
: 37.5,
propList
: [
'*'
]
}
}
}
比如设计稿的宽度是 375px,那么这里的 rootValue 设置 37.5 就好啦