PostCSS 是一款基于 Node.js 的 CSS 处理器，可以帮助我们自动化处理 CSS 文件。postcss-px2rem 是其中一个重要包，用于自动将像素单位转换成 rem 单位。在移动端开发中，使用 rem 作为单位有着很大的好处，可以根据屏幕大小自适应调整，提高用户体验。本文将为大家介绍如何使用 postcss-px2rem 包来进行像素单位自动转换。
安装
首先，在你的项目根目录中打开终端，使用 npm 进行安装。
npm install postcss postcss-px2rem --save-dev
这里同时安装了 postcss 和 postcss-px2rem 包。
配置
接着，在项目根目录中新建一个 postcss.config.js 的文件，并在其中进行配置。
module.exports = { plugins: [ require('postcss-px2rem')({ remUnit: 75, // 75px = 1rem exclude: /node_modules|src\/styles\/iconfont.css/ // 排除文件 }) ] }
可以看到，我们在 plugins 数组中添加了一个 postcss-px2rem 插件，并且配置了 remUnit 的值为 75，即 75px 等于 1rem。exclude 属性用于排除无需转换的文件，比如第三方库的样式文件等。
使用
最后，在 package.json 文件中添加以下代码。
{ "scripts": { "build:css": "postcss src/styles/*.css -d dist/css/ --config postcss.config.js" } }
这里定义了一个 build:css 脚本，用于对 src/styles 目录中的所有 CSS 文件进行处理，并将结果输出到 dist/css 目录中。--config 指定了我们刚刚新建的 postcss.config.js 配置文件。
最后，运行下面的命令。
npm run build:css
项目中的 CSS 文件中所有的像素单位都会自动转换成 rem 单位。
示例代码
index.html
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- -------------- --------------- ------- ---------- - ------ ------ ------- ------ ------- - ----- - ------ - ---------- ----- - ------- - ------ ----- ------- ------ ----------- ---- ---------------------- --------- ------ ------- ---------------- ------ - -------- - ---------- ----- ------------ ---- - ---- - -------- ------ ------ ------ ------- ----- ------- ---- ----- -------- ----- ---------- ----- ------ ----- ----------------- ----- -------------- ---- ----------- ------- ---------------- ----- - -------- ------- ------ ---- ------------------ --- ---------------- -------------- ------------ ---- --------------------- -- ------------------------------------------ -- -------- -------------------- ------ ------- -------展开代码
postcss.config.js
module.exports = { plugins: [ require('postcss-px2rem')({ remUnit: 75, // 75px = 1rem exclude: /node_modules|src\/styles\/iconfont.css/ // 排除文件 }) ] }
package.json
-- -------------------- ---- ------- - ------- ---------------------- ---------- -------- -------------- --- -------------- --------- ------- ----------- ---------- - ------------ -------- ---------------- -- --------- -------- ------------------ -- --------------- --- ------------------ - ---------- --------- ----------------- -------- -- --------- --- ---------- ----- -展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68698
