不能直接用html{font-size:100vw/7.5}，因CSS不支持除法运算符，该声明会被浏览器忽略；须预设为具体值如13.33vw，并注意iOS键盘弹出时视觉视口缩导致字号骤降，推荐以100为基准换算rem以提升可维护性与兼容性。
为什么不能直接用 html { font-size: 100vw / 7.5; }
CSS 不支持除法运算符，这种写法会直接被浏览器忽略。你看到的“根字号没变”，往往就是这个原因。必须把计算结果预设为具体数值，比如设计稿宽 750px，目标是让 1rem ≈ 100px，那就要算出 100 / 750 * 100 = 13.333333vw，再四舍五入到小数点后两位（13.33vw）——太多小数位安卓 WebView 会舍入出错。
html { font-size: 13.33vw; } 在 iOS 键盘弹出时为什么会缩得特别小
iOS Safari 在软键盘唤起时会把 vw 基于“视觉视口”（visual viewport）计算，而视觉视口宽度远小于布局视口（layout viewport），导致 font-size 骤降，整个页面文字、间距塌缩。这不是 bug，是规范行为。规避方式只有两种：
- 在
focus事件中临时切回固定font-size（如100px），失焦后再切回13.33vw - 放弃纯 CSS 方案，改用 JS 动态设置
document.documentElement.style.fontSize，并监听resize和orientationchange，但要加节流
rem 换算时为什么推荐除以 100 而不是直接按设计稿像素写
把设计稿 375px 宽映射为 1rem = 100px，相当于人为放大了 100 倍基准，所有尺寸变成“除以 100”就能得 rem 值：按钮高 44px → 0.44rem，标题字 32px → 0.32rem。这样做的实际好处有三个：
- 避免小数过多（比如 375px 设计稿下 1px =
0.002666rem，难读难维护） - 浏览器对
font-size有最小限制（Chrome 实际下限约 11.32px），13.33vw在小屏上可能跌破 12px，被强制拉高，破坏比例；而基于 100 的换算能让你一眼看出是否踩线 - 后续加媒体查询适配 PC 端时，可直接写
@media (min-width: 768px) { html { font-size: 100px; } }，无需重新推算
混用 px 和 rem 会导致什么不可逆问题
一旦你在同一个组件里同时用了 px 边框、rem 内距和 rem 字号，缩放时三者变化不同步：边框不会随根字号变，内距和字号会。结果就是按钮圆角突兀、图标和文字错位、卡片阴影脱离预期位置。更隐蔽的是 border-radius：0.2rem 在 iPhone SE 上是 8px，在 iPad Pro 上可能是 16px，但如果你写了 border: 1px solid #ccc，这条 1px 边框永远都是 1px，视觉权重越来越弱。
立即学习“前端免费学习笔记（深入）”；
真正需要固定尺寸的地方（比如 1px 细线），应该用 transform: scaleY(0.5) 或 box-shadow 模拟，而不是退回到 px。
