🎯 使用 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 + 移动端的自适应布局体系,既贴合设计,也高效开发。