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

    技术2026-03-05  8

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

    Processed: 0.014, SQL: 9