用 rem 实现缩放的本质是动态修改 html 的 font-size，而非 css 自动响应屏幕变化；不依赖 js 或媒体查询，rem 本身不具备自适应能力。
直接说结论：用 rem 实现缩放，本质是动态改 html 元素的 font-size，而不是靠 CSS 自动缩放；不配合 JS 或媒体查询，rem 本身不会“随屏幕尺寸缩放”。
为什么单纯设 html { font-size: 16px } 没用
很多人以为只要把所有尺寸写成 rem，浏览器就会自动适配——其实不会。rem 只是相对于根元素字体大小的相对单位，它本身不感知屏幕变化。如果 html 的 font-size 固定不变，那 1rem 就永远等于 16px（或你设的值），和屏幕宽高毫无关系。
常见错误现象：
– 页面在手机上文字小、按钮挤，但没变大
– 改了 body 的 font-size，发现 rem 没反应（因为 rem 只认 html）
- 必须显式改变
html的font-size值，才能触发rem缩放 - 这个值通常需要根据
screen.width或document.documentElement.clientWidth计算 - 纯 CSS 方案（如
@media）只能做断点切换，不是连续缩放
用 JS 动态设置 html.font-size 的最小可行方案
最常用的是“等比缩放”逻辑：以某参考屏宽（比如 375px）为基准，按比例放大/缩小 font-size。例如：
function setRem() {
const baseWidth = 375; // 设计稿宽度
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = `${scale * 16}px`;
}
setRem();
window.addEventListener('resize', setRem);
说明：
– 这里 16px 是设计稿中 1rem 对应的像素值（即 1rem = 16px），不是固定死的，可按需改成 20、12 等
– 用 clientWidth 而非 screen.width，因后者含状态栏、虚拟键等干扰值
– 必须在 DOMContentLoaded 后执行一次，否则首屏可能漏设
- 如果项目用 Vue/React，建议封装成初始化函数，在入口处调用，而非挂到
mounted或useEffect里（太晚） - 避免在
resize中高频触发重排：加节流（如 Lodashthrottle）或用requestAnimationFrame - 部分安卓 WebView 对
font-size设置有延迟，可加setTimeout(..., 0)强制重绘
用 @media + rem 做断点适配（无 JS 场景）
如果你不能用 JS（如纯静态页、某些 CMS 模板），就只能靠媒体查询分段控制 html 字体大小：
@media screen and (max-width: 320px) {
html { font-size: 13.65px; } /* 320 / 375 * 16 */
}
@media screen and (min-width: 321px) and (max-width: 375px) {
html { font-size: 16px; }
}
@media screen and (min-width: 376px) and (max-width: 414px) {
html { font-size: 17.65px; } /* 414 / 375 * 16 */
}
说明：
– 所有值都按 screenWidth / baseWidth × baseRemPx 算出，保持比例一致
– 断点数量不宜过多，3~5 个足够覆盖主流设备
– 注意 min-width 和 max-width 边界不要重叠或留空，否则中间尺寸会回退到默认 16px
- 这种方案不平滑，比如从 375px 缩到 374px，
font-size会跳变，视觉上可能闪一下 - 无法处理横竖屏切换时的实时响应（除非监听
orientationchange并重设 media 查询） - 若设计稿是 750px 宽，别直接套用上面公式——先统一换算成等效 375px 基准再算
容易被忽略的兼容性与细节
很多项目跑起来没问题，但上线后在某些机型出问题，往往卡在这几个点：
- iOS Safari 默认最小字体限制（通常 11px），如果算出的
font-size小于该值，实际渲染会被强制拉高，导致缩放失真 - 微信内置浏览器（X5）对
html的font-size修改有时缓存旧值，可加document.documentElement.style.fontSize = ''清空后再设 - 使用
vw替代 JS 方案（如html { font-size: 100vw / 3.75 }）看似简洁，但 iOS 8~10 不支持vw在font-size中使用 -
rem对border、padding、margin都生效，但对line-height（无单位）是倍数关系，不受font-size影响——这点常被误认为“缩放失效”
真正要实现“随屏幕尺寸缩放”，核心就一条：让 html 的 font-size 成为屏幕宽度的函数。其余都是围绕这个目标的适配与兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
