如何配置Vue3.0项目使用postcss-pxtorem实现自动转换px为rem？

本文共计738个文字，预计阅读时间需要3分钟。

postcss-pxtorem 是一个 PostCSS 插件，用于将像素单位转换为 rem 单位。在前端开发中，虽然原设计稿的尺寸通常以像素为单位，但为了更好的适应性，现在更倾向于使用 rem 单位。然而，每次制作过程中都需要手动计算 rem 值，这增加了工作量和出错的可能性。

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npm install postcss-pxtorem -D

2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem propList: ['*'] } } }

操作到这里移动端自动适配了吗，当然不能，目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵，后来发现了一个好理解的方法，下面来分享一下。