最稳轻量方案是用vw设html font-size再统一用rem写尺寸；因纯vw写宽高会失控：小屏文字过小、大屏UI失衡、需全局重算、IE11不支持且Safari对calc/vw兼容差。
直接用 vw 驱动 html 的 font-size，再统一用 rem 写所有尺寸，是当前最稳、最轻量、无需 JS 就能上线的等比缩放方案。
为什么不能直接用 vw 写宽高
看似简单，但实际会失控：
- 小屏下
font-size: 5vw可能缩到8px，文字糊成一片；iOS Safari 强制最小字号为11px，导致计算失效 - 大屏（如折叠屏或横屏 iPad）下
20vw可能飙到40px，按钮撑满半屏，UI 失衡 - 每个
vw值都要单独调参，改设计稿基准就得全局重算 - IE11 完全不支持
vw，fallback 逻辑复杂（比如要用@supports+ 媒体查询兜底）
怎么设 html { font-size } 才不翻车
核心是让根字号随视口线性变化，其余全部用 rem —— 这才是可控的等比缩放基点：
- 设计稿是
750px（常见二倍图），对应逻辑宽度375px→html { font-size: 26.67vw; }（因为100px / 375px × 100 = 26.67） - 设计稿是
640px→html { font-size: 31.25vw; }（100 / 320 × 100 = 31.25） - 必须加
@media限制极值：@media (max-width: 320px) { html { font-size: 85px; } }防止超小屏文字不可读；@media (min-width: 640px) { html { font-size: 170px; } }防止大屏爆炸 - 别信
calc(100vw / 3.75)这种写法——Safari 对calc中带除法的vw运算兼容差，部分安卓 WebView 还会四舍五入丢精度
body 字号必须单独重置
根字号被拉高后，所有继承自 html 的字体（包括 body、p、span）都会跟着放大，但正文内容不该随屏幕狂涨：
-
body { font-size: 0.16rem; }是最常用解法（假设你设了html { font-size: 100px; }，那0.16rem = 16px，刚好还原浏览器默认字号） - 如果设计稿里正文字号是
24px（二倍图），则按比例写font-size: 0.24rem;，而不是硬写24px - 图标字体（如
iconfont）通常依赖font-size渲染，也要用rem控制，否则在不同屏上大小不一
transform: scale() 为什么生产环境慎用
它看似简单，但会破坏渲染上下文：
- 点击热区错位：缩放后元素视觉位置和事件坐标不一致，导致按钮点不中
-
position: fixed元素漂移：缩放会干扰固定定位的锚点计算 - 打印/截图失真：缩放是渲染层操作，导出时无法还原原始尺寸
- 无障碍支持差：屏幕阅读器可能读取缩放前的原始 DOM 尺寸，造成语义混乱
真正需要精细控制缩放节奏（比如动画中微调）时，才考虑 JS 动态方案，但必须监听 resize 和 orientationchange，且要处理安卓 WebView 的抖动问题——多数项目没必要走到这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
