rem不会自动响应屏幕尺寸，因其依赖html根元素font-size，而默认值固定为16px；必须通过JS动态设置html字体大小（如clientWidth/10），再配合CSS中按比例使用rem值（如48px→0.48rem）。
为什么直接用 rem 不会自动响应屏幕尺寸
很多人以为只要把字体单位换成 rem，文字就会随屏幕缩放——其实不会。rem 是相对于根元素（html）的 font-size 计算的，而浏览器默认的 html 字体大小是固定值（通常 16px），不随视口变化。必须手动改变 html 的 font-size，rem 才能“活”起来。
常见错误是只写 font-size: 1.2rem; 却没动 html 根字号，结果和用 px 几乎没区别。
- 响应式依赖的是动态设置
html的font-size，不是单纯换单位 - 不能只靠 CSS 媒体查询硬编码多组
font-size，否则断点之间是阶梯跳变，不够平滑 - 移动端需注意：iOS Safari 对极小
rem值（如0.5rem）可能四舍五入渲染，导致实际字号不准
用 JavaScript 动态设置 html 的 font-size
核心思路是把屏幕宽度映射为根字号，例如：以 375px 设计稿为基准，设 html 字体为 100px，则 1rem = 100px → 换算比为 100 / 375 ≈ 0.2667，那么任意宽度 w 下，html 字体应为 w × 0.2667。
更常用的是「等比缩放」：让 1rem 始终等于屏幕宽度的 1/10（即 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';），这样 1rem ≈ 37.5px（在 375px 宽设备上），方便设计稿换算。
立即学习“前端免费学习笔记（深入）”；
function setRootFontSize() {
const baseWidth = 375; // 设计稿宽度
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 100 + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
window.addEventListener('orientationchange', setRootFontSize);- 务必在
DOMContentLoaded后执行，避免 DOM 尚未就绪 - 加上
orientationchange事件，否则横竖屏切换时字号不更新 - 某些安卓 WebView 可能需要加
setTimeout延迟执行，防止首次获取clientWidth为 0
CSS 中如何配合使用 rem 写字体
JS 控制了根字号后，CSS 中所有 font-size 都可按设计稿原始像素值除以 100 来写。例如设计稿中标题是 48px → 写成 font-size: 0.48rem；正文 32px → font-size: 0.32rem。
注意：不要混用 em 或百分比做字体，它们会叠加计算，破坏等比逻辑。
html {
font-size: 100px; /* 初始占位，JS 会覆盖 */
}
.title {
font-size: 0.48rem; /* = 48px @ 375px 屏幕 */
}
.content {
font-size: 0.32rem; /* = 32px */
}- 建议统一用小数（如
0.48rem），避免写48rem这类明显错误 - 如果项目用 PostCSS，可用
postcss-pxtorem插件自动转换，但需确认其基准值与 JS 设置一致（比如都按 100px 根字号） - 慎用
min-font-size或max-font-size（目前仅 Safari 支持），替代方案是媒体查询兜底：@media (max-width: 320px) { html { font-size: 85px; } }
兼容性与线上易忽略的坑
PC 端缩放（Ctrl+/-）或系统级字体放大设置，会影响 document.documentElement.clientWidth 的取值，进而干扰 rem 缩放逻辑。这不是 bug，而是浏览器行为——但用户感知就是“字忽大忽小”。
-
微信内置浏览器（X5）对
resize事件支持不稳定，建议加定时检测（setInterval）作为 fallback - 部分安卓机锁屏唤醒后，
clientWidth暂时失真，可监听pageshow事件重新计算 - 服务端渲染（SSR）场景下，初始 HTML 中的
html字号是静态的，JS 注入前会出现闪动，需用内联 style 或骨架屏缓解 - 字体层级别响应（比如标题比正文缩得慢）无法单靠 root fontSize 实现，得配合媒体查询或 CSS clamp()
真正难的不是写几行 JS，而是让不同设备、不同缩放状态、不同加载时机下的字体表现一致——这点常被 demo 忽略。
