html5项目中使用postcss-pxtorem实现移动端适配，核心是postcss构建时将px转rem，并配合js动态设置html根字体大小；需正确配置rootvalue、proplist等参数，确保js与插件的换算逻辑一致（如750设计稿常用rootvalue=37.5且js设fontsize=clientwidth/10）。
在 HTML5 项目中使用 postcss-pxtorem 插件，核心是通过 PostCSS 在构建阶段将 CSS 中的 px 单位自动转换为 rem，配合根字体大小（html font-size）实现移动端适配。关键在于正确配置插件参数、设置基准值，并确保 JS 动态设置根字号。
安装与基础配置
先安装依赖：
npm install postcss postcss-cli postcss-pxtorem --save-dev- 若用 Webpack，还需安装
postcss-loader；若用 Vite，内置支持 PostCSS 配置文件
在项目根目录新建 postcss.config.js：
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 设计稿宽度（如 750px）除以 20，即 1rem = 37.5px
propList: ['*'], // 对所有属性中的 px 进行转换（也可指定如 ['font', 'margin']）
selectorBlackList: ['.no-rem'], // 匹配该类名的选择器不转换
exclude: /node_modules|\/src\/assets\//, // 忽略 node_modules 和某些静态资源目录
minPixelValue: 2 // 小于 2px 的值不转（避免 1px 边框被转成 0.0267rem 导致消失）
})
]
}
设置 HTML 根字体大小
仅靠 PostCSS 转换不够，必须让 1rem 对应实际物理尺寸。常用 JS 方案（放入 或入口 JS）：
(function (doc, win) {
const docEl = doc.documentElement;
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
const recalc = () => {
const width = docEl.clientWidth;
if (!width) return;
// 假设设计稿宽 750px，则 1rem = 750 / 20 = 37.5px
docEl.style.fontSize = width / 10 + 'px'; // 即 1rem = 屏幕宽 / 10 → 等价于 100vw / 10 = 10vw
};
recalc();
win.addEventListener(resizeEvt, recalc);
})(document, window);
说明：这里采用「屏幕宽度 / 10」方式，使 1rem = 10vw，等效于 750px 设计稿下 1rem = 75px → 实际更推荐用 width / 7.5（即 1rem = 100px），按需调整 rootValue 保持一致。
编写 CSS 时的注意事项
- 所有尺寸（
font-size、padding、height等）直接写px，插件会自动转为rem - 避免对已为
rem、em、%的值重复写px，否则会被误转 - 图标字体、border-image 等特殊场景慎用，必要时加
.no-rem类跳过转换 - 媒体查询中的
px默认不转换（插件默认关闭mediaQuery选项），如需转换需显式开启
验证与调试技巧
转换后可在浏览器开发者工具中查看生成的 CSS 是否为 rem；若未生效，检查：
- PostCSS 是否真正执行（可临时加
postcss-reporter查日志） -
rootValue是否与 JS 设置的html font-size逻辑匹配（例如 JS 设16px，rootValue 却写100，结果会缩放失真） - CSS 文件是否被
postcss-loader或构建工具识别（Vite 默认处理.css，Webpack 需确认 rule 配置）
不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
