🎯 使用 rem 适配 PC 与移动端——原理与实战指南
一、核心原理
rem单位基于根元素（<html>）的font-size。- 修改
html的font-size，页面上所有以rem为单位的样式都会动态调整。 - 示例：若
html { font-size:16px; }，则1rem = 16px；若设为32px，则1rem = 32px。
二、方案概览：flexible.js + postcss-pxtorem
方案特点
- 开发阶段使用 px 编写，贴合设计稿；
- 构建阶段自动转换，PostCSS 插件将 px => rem；
- 运行阶段动态赋值，根据窗口宽度设置
html的font-size，实现视觉适配。
三、实现细节
1. flexible.js：动态设定根字体
(function(window, document) {
const docEl = document.documentElement;
const breakpoints = [
{ min: 0, max: 480 },
{ min: 481, max: 767 },
{ min: 768, max: 1023 },
{ min: 1024, max: 1279 },
{ min: 1280, max: 1919 },
{ min: 1920, max: Infinity }
];
const remBase = 100;
function setRemUnit() {
const w = docEl.clientWidth;
let rem;
for (const bp of breakpoints) {
if (w >= bp.min && w <= bp.max) {
rem = bp.max === Infinity
? remBase
: remBase + remBase * (w - bp.min) / (bp.max - bp.min);
break;
}
}
if (rem == null) {
const bp0 = breakpoints[0];
rem = remBase * (w - bp0.min) / (bp0.max - bp0.min);
}
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', e => e.persisted && setRemUnit());
})(window, document);
- 根据视口宽度分段设置根字体；
- 常与
main.js配合加载； - 实现不同屏幕下
1rem的像素值平滑变化。
2. postcss-pxtorem 插件：构建阶段自动转换
安装（建议锁定版本）：
npm uninstall postcss-pxtorem
npm install postcss-pxtorem@5.1.1 --save-dev
配置示例（以 Vite 为例）：
import postCssPxToRem from 'postcss-pxtorem';
export default defineConfig({
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 192, // 1920 设计稿下，1rem = 192px
propList: ['*'], // 所有 px 属性均转换
})
]
}
}
});
rootValue：用于计算1rem = rootValue px；propList：控制需转换的属性，['*']表示全部；- 行内样式中的
px默认不转换； - 可通过写
1Px或2PX忽略单个样式转换。
四、完整流程
| 阶段 | 工具 | 作用说明 |
|---|---|---|
| 开发阶段 | px 编写样式 | 保持设计稿一致，易于计算 |
| 构建阶段 | postcss-pxtorem 插件 | 自动将 CSS 中所有 px 转为 rem |
| 运行时 | flexible.js | 实时调整根字体，驱动响应式布局 |
这样就实现了“一套代码，适配多端”设计理念。
五、最佳实践与注意事项
- rem 是相对单位，不是响应式手段。它可根据根字体变化进行缩放，但不替代流式布局或百分比响应。
- 62.5% 方式谨慎使用：将
html的字体设为62.5%（即 10px），虽然简化了rem换算，但可能干扰用户预设习惯，不推荐。 - 合理设置断点与基准尺寸：
flexible.js的分段与postcss-pxtorem的rootValue应匹配规划，以维护视觉一致性。 - 避免在边框、阴影等视觉细节上使用 rem：推荐使用 px，以保证元素样式的一致性和细腻度。
- 行内样式需额外处理：PostCSS 插件不作用于行内样式或 JS 动态样式，需手动替换或通过 JS 方式计算转换。
六、小结 ✨
通过 flexible.js + postcss-pxtorem，你可以：
- 按设计稿书写 px，保持开发体验；
- 自动转换为 rem，提升可维护性与兼容性；
- 动态调整根字体，实现对多屏幕尺寸的适配。
联合使用后，能够快速构建一套兼容 PC + 移动端的自适应布局体系，既贴合设计，也高效开发。