唯一安全混用rem和vw的方式是：仅用vw设置html font-size，其余样式全用rem；设计稿750px对应100px根字号时写html{font-size:13.3333vw}，并配media极值限制与body重置字号，禁用calc除法、避免line-height和图标字体混用单位。
混用 rem 和 vw 的唯一安全方式：vw 只设 html font-size，其余全用 rem
直接把 vw 当作普通单位写在 width、font-size 或 padding 上，再同时用 rem 控制另一些尺寸——这种“混用”本质是两套缩放逻辑打架，必然出问题。真正能稳定工作的混用，只有一种结构：html { font-size: Xvw; }，然后所有业务样式（字号、边距、圆角、最大宽）全部用 rem。
常见错误现象：
- 按钮文字随屏幕变大，但左右 padding 却卡在某个值不动
- 设计稿 750px 下正常，切到 iPad 横屏后字体爆炸，但容器宽度没跟上
- Android WebView 中
100vw突然缩水，导致根字号跳变，整个页面抖动
实操建议：
- 设计稿宽度为 750px、基准根字号为 100px → 写
html { font-size: 13.3333vw; }（即100 / 750 * 100） - 必须加极值限制：
@media (max-width: 320px) { html { font-size: 85px; } }和@media (min-width: 640px) { html { font-size: 170px; } }，否则超小屏文字糊成一片，大屏按钮撑满半屏 -
body必须重置字号：body { font-size: 0.16rem; }（假设你设了1rem = 100px，那0.16rem = 16px），否则正文跟着根字号狂涨
为什么不能用 calc(100vw / 3.75) 设置根字号
这个写法看着数学正确（375px 设计逻辑宽 → 1rem = 100px → 100vw / 3.75），但在 Safari 和部分安卓 WebView 中会出错：一是 calc() 里带除法的 vw 运算被四舍五入丢精度；二是 iOS Safari 对这类表达式解析不稳定，偶尔返回 0 导致整个页面缩成针尖大小。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 老老实实用乘法：
html { font-size: 26.67vw; }（对应 750px 设计稿下 100px 根字号） - 如果要用变量控制，改用 CSS 自定义属性 +
calc()乘法：:root { --base: 750; --rfs: 100; } html { font-size: calc(100vw / var(--base) * var(--rfs)); }，但依然要配@media极值兜底 - 真机测试时重点观察
document.documentElement.clientWidth和window.innerWidth是否同步变化，软键盘弹起后是否突变
混用场景下图标字体和 line-height 容易翻车
图标字体（如 iconfont）靠 font-size 渲染，如果只对文字用 rem、对图标用 vw，就会出现同一行里文字正常、图标忽大忽小；line-height 若写固定数值（如 line-height: 1.5），在根字号被拉高后会导致行距失衡，文字贴顶或留白过大。
实操建议：
- 所有图标统一用
rem，例如.icon { font-size: 0.48rem; }（对应设计稿 48px） -
line-height必须用无单位数值（如1.4），它会自动继承当前font-size计算，而不是写24px或1.4rem - 字体渲染差异真实存在：iOS 和 Android 对相同
font-size的实际渲染高度不同，建议在关键文本区域加text-rendering: optimizeLegibility;并预留 ±1px 视觉容差
vw+rem 方案上线前必须真机测的三个点
模拟器完全不可信：iOS 模拟器不触发软键盘，安卓模拟器不模拟 WebView 视口重算逻辑。不真机测，等于没测。
实操建议：
- iPhone 真机连 Safari Web Inspector，输入框聚焦后观察
window.innerWidth是否跳变（iOS 软键盘会压缩视口宽度） - 微信内置浏览器中打开页面，检查
document.documentElement.style.fontSize是否被 JS 动态脚本覆盖（很多 SDK 会强行重设根字号） - 折叠屏设备横竖屏切换时，验证
vmin是否生效——若用vmin替代vw设根字号（html { font-size: 13.3333vmin; }），可避免横屏时字体暴涨
最常被忽略的是：混用不是为了“更灵活”，而是为了“去 JS”。一旦加了 JS 动态设置根字号，就和纯 vw+rem 方案目标冲突，反而增加竞态风险。要么全 CSS 驱动，要么全 JS 驱动，中间态最危险。
