rem布局本质是动态设置html根元素font-size，需JS监听DOM加载和屏幕变化实时计算并更新；须禁用用户缩放、避免CSS覆盖、用PostCSS自动转换px为rem，并统一flex属性单位。
rem 布局本质是动态设置 html 根元素的 font-size
rem 是相对于根元素（html）字体大小的单位，不是自动适配的魔法。它生效的前提是你主动、及时地调整了 html 的 font-size 值。很多项目失败，不是 rem 写错了，而是漏掉了这一步，或只在页面加载时设了一次，没监听屏幕变化。
典型做法是：根据设备宽度（document.documentElement.clientWidth）按比例计算出一个 font-size，再赋给 html 元素。例如设计稿宽 750px，希望 1rem = 100px，则公式为：font-size = clientWidth / 750 * 100。
- 必须在 JS 中执行，CSS 里无法动态计算设备宽度
- 推荐在
DOMContentLoaded和resize事件中都触发重设（注意防抖） - 部分安卓 WebView 不触发
resize，可补充监听orientationchange或用setTimeout轮询
如何避免 rem 在不同设备上“忽大忽小”
问题常出现在 iOS Safari 横竖屏切换后字体异常放大，或某些 Android 机型缩放失效——根本原因是系统级字体缩放干扰了 html 的 font-size 计算基准。
关键防御措施：
立即学习“前端免费学习笔记（深入）”；
- 在
中强制关闭用户缩放： - 初始化时用
getComputedStyle(document.documentElement).fontSize检查是否被 UA 强制修改过，必要时用!important覆盖（慎用） - 避免在 CSS 中对
html或body设置font-size（尤其带单位的），否则会覆盖 JS 设置值
px 到 rem 的转换不能靠肉眼估算
设计稿标注是 px，但写 CSS 时要转 rem。手动除以根字号太容易出错，尤其当根字号是动态值（如 37.5、50、100 不固定）时。
推荐方案：
- 开发阶段用 PostCSS 插件
postcss-pxtorem，配置rootValue为你的基准值（如 37.5），它会把所有px自动转成 rem - 如果用 Vite，可配合
vite-plugin-pxtorem，支持按文件夹/规则条件启用 - 切记：该插件只作用于构建时，不解决运行时根字号变化的问题；它和 JS 动态设
font-size是互补关系，不是二选一
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 对应 750px 设计稿下 1rem = 37.5px
propList: ['*'],
exclude: /node_modules|lib/
})
]
}flex + rem 混合布局时，flex-basis 容易被忽略
用 rem 写宽度、padding、margin 很自然，但 flex 布局中 flex-basis 若写成 flex-basis: 200px，就脱离了 rem 体系，导致缩放失准。
正确做法：
- 统一用 rem 单位：
flex-basis: 5.3333rem（假设 200px ÷ 37.5 ≈ 5.3333） - 或改用无单位数值（推荐）：
flex: 0 0 5.3333rem，语义更清晰 - 特别注意
flex-grow和flex-shrink是纯数字，不涉及单位，无需转换
实际项目中最难缠的不是 rem 本身，而是「动态根字号」和「第三方 UI 库样式」的冲突。比如引入的 element-plus 或 vant 默认用 px，它们的组件内部尺寸不会随你改 html 字号而等比缩放。这时候要么全局重写其样式，要么限定 rem 只用于业务模块，UI 组件保持原单位——没有银弹，得看团队对一致性的容忍度。
