直接结论：rem+vw混合方案最稳，但需用css控制根字号（如html{font-size:clamp(14px,2.5vw,16px)}）避免js覆盖系统缩放，js动态方案须节流+监听横竖屏+读取设备像素比，且viewport配置必须正确。
直接结论：别单独用 rem，也别盲目用 vw；rem + vw 混合方案最稳，但必须控制根字号计算时机和精度边界。
为什么不能只靠 JS 动态设 document.documentElement.style.fontSize
很多人一上来就写 window.onresize 里反复执行 document.documentElement.style.fontSize = (window.innerWidth / 375) * 100 + 'px'，结果页面疯狂闪动。这不是代码逻辑错，是触发太密、时机太晚。
- 横竖屏切换时
window.innerWidth不一定实时更新，尤其 iOS Safari 在键盘弹出后才回传新值 -
DOMContentLoaded时设一次？那用户旋转手机后布局就僵住不动了 - 系统级字体放大（如 iOS「更大字体」辅助设置）会直接覆盖你 JS 设置的
font-size，导致 rem 值失真 - 正确做法：用
requestAnimationFrame节流 + 单独监听window.matchMedia('(orientation: landscape)')，初始化脚本必须塞进内联执行
为什么 html { font-size: 13.3333vw } 比 JS 更可靠
这个写法本质是把 JS 计算逻辑“编译”进 CSS，浏览器原生支持、无 JS 执行延迟、不被系统字体设置干扰——前提是设计稿宽度明确（比如 750px），且你接受 vw 的固有缺陷。
- 计算公式固定：
100vw / 设计稿宽度 × 目标根字号，750px 设计稿配 100px 根字号 →html { font-size: 13.3333vw } - iOS 键盘弹出时，
vw会按“视觉视口”重算，导致font-size突然变小，文字瞬间缩成蚂蚁——需配合@media (pointer: coarse)或min-font-size（仅 Safari）兜底 - 安卓 WebView 对小数
vw渲染存在舍入误差，连续嵌套rem（如padding: 0.2rem→2.6666vw）可能被四舍五入为 0，border 直接消失
rem 和 vw 混用时，border 和 padding 为啥总不对齐
根本不是单位本身的问题，是渲染链路差异暴露了精度裂缝：rem 的基准来自 JS 或 CSS 设置的根字号（可能是小数 px），而 vw 是视口像素的百分比（浏览器内部用浮点运算）。两者叠加后，小数值在 sub-pixel 渲染阶段就被截断或抖动。
-
border: 0.02rem在 375px 设计稿下 ≈ 2px，但若根字号实际是 99.98px（因 vw 计算误差），那 0.02rem 就只剩 1.9996px —— 浏览器可能渲染成虚线或干脆不可见 -
padding: 0.3rem 1vw左右不对称？因为 0.3rem 是基于根字号的等比缩放，1vw 是纯视口比例，二者缩放曲线不同步 - 解法很务实：所有
border固定用1px（iOS 会自动适配 retina），padding/margin全部统一用rem或全部用vw，禁止混用；圆角、阴影等对精度敏感属性也同理
安全区（safe-area）和 viewport-fit=cover 怎么跟 rem/vw 配合
很多团队加了 env(safe-area-inset-bottom) 却发现底部留白错位，问题常出在 viewport 配置和根字号计算没对齐。
-
env()变量只在viewport-fit=cover下生效，缺这句，safe-area-inset-*全返回 0 - 如果用 JS 动态设根字号，必须在
env()可读取后再执行，否则初始计算没考虑安全区，页面加载瞬间会跳一下 - 更稳妥的做法：CSS 里直接用
calc(1rem + env(safe-area-inset-bottom))，但注意env()是动态值，不能用于@media查询条件 - rem/vw 方案本身不感知安全区，它只管缩放；真正要“避开刘海”，得靠 padding/margin + env() 组合，而不是指望单位自动适配
最易被忽略的一点：无论用哪种方案，<meta name="viewport"> 缺失或写错，所有 rem/vw 计算都建立在错误的视口基准上。尤其是 initial-scale=1 被误删，或 user-scalable=yes 开放后用户双指缩放，会彻底破坏等比关系——这点没有容错余地，必须卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
