css:使用postcss-pxtorem自动将px转化为rem

我们平时做移动端适配的时候都是用 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 就好啦

你可能感兴趣的:(css)