用 rem 实现移动端等比缩放的核心是动态设置 html { font-size }，再统一用 rem 描述所有尺寸；设计稿 750px 对应 375px 视口时设为 26.67vw，需加 viewport meta 及 min/max 媒体查询兜底，并重置正文字号与图标字体。
用 rem 实现移动端等比缩放，核心是让页面所有尺寸随屏幕宽度线性变化——不是靠媒体查询逐个断点适配，而是通过动态设置 html { font-size }，再统一用 rem 描述宽高、边距、字体等，自然达成缩放。
设计稿基准与根字号公式
主流设计稿为 750px（二倍图），对应逻辑视口宽度 375px。此时约定：1rem = 100px（便于换算），则根字号应设为：
-
html { font-size: 26.67vw; }（因为 100 ÷ 375 × 100 = 26.67） - 若设计稿是 640px（对应 320px 视口），则写
font-size: 31.25vw;（100 ÷ 320 × 100） - 该写法简洁、纯 CSS、无需 JS，但必须搭配
<meta name="viewport" content="width=device-width, initial-scale=1">
必须加极值限制，防小屏/大屏失控
vw 方案虽方便，但极端尺寸下会出问题：超小屏文字过小不可读，超大屏元素撑爆。需用媒体查询兜底：
-
@media (max-width: 320px) { html { font-size: 85px; } }—— 保证最小可读性 -
@media (min-width: 640px) { html { font-size: 170px; } }—— 防止平板或横屏过度放大 - 这两个断点值对应的是设备独立像素（CSS pixels），不是物理像素，直接按视口宽度判断即可
正文字号要单独重置
根字号拉高后，body、p、span 等继承自 html 的元素字体也会被放大。但正文字号不该随屏幕狂涨，需手动还原：
- 假设你设了
html { font-size: 100px; }，浏览器默认字号是 16px，则正文写body { font-size: 0.16rem; } - 设计稿中正文字号为 24px（二倍图），就写
font-size: 0.24rem;，而不是硬写24px - 图标字体（如 iconfont）也依赖
font-size渲染，同样要用 rem 控制，否则大小不一致
避开 calc(vw / N) 这类写法
像 calc(100vw / 3.75) 看似直观，但存在兼容隐患：
- Safari 对 calc 中含除法的 vw 表达式支持不稳定，可能计算失败或取整异常
- 部分安卓 WebView 会四舍五入丢精度，导致小屏下 1rem 实际偏差 1–2px
- 推荐用乘法形式：如
26.67vw或calc(100vw * 0.2667)，更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
