H5响应式字体缩放通过媒体查询动态设置:root的font-size，结合rem单位实现等比缩放；可采用断点固定值、calc()线性插值或JS监听resize/横竖屏切换三种方式，需配viewport meta且避免CSS与JS设置冲突。
在 H5 页面中，通过媒体查询动态修改 :root 的 font-size，是实现「响应式字体缩放」（常用于适配不同屏幕宽度、尤其是移动端）的常用手段。核心思路是：利用 rem 单位相对于根元素字体大小的特性，配合媒体查询按屏幕宽度设置不同的 html 字体基准，从而让所有使用 rem 的元素等比缩放。
用媒体查询为不同宽度设定固定 font-size
这是最直接、兼容性最好的方式。根据常见设备断点，用 CSS 媒体查询分别设置 :root 的字体大小：
- 例如：320px 宽度设为 16px，375px 设为 18.75px，414px 设为 20.7px……使 1rem ≈ 1px 在设计稿基准下成立（如 750px 设计稿，常设 750/10 = 75px → 1rem = 75px，即 100px = 1.333rem）
- 写法示例：
@media screen and (max-width: 320px) { :root { font-size: 16px; } }
@media screen and (min-width: 321px) and (max-width: 375px) { :root { font-size: 18.75px; } }
@media screen and (min-width: 376px) and (max-width: 414px) { :root { font-size: 20.7px; } }
@media screen and (min-width: 415px) { :root { font-size: 22px; } }
这样，页面加载时浏览器会自动匹配当前视口宽度，应用对应根字号，后续所有 rem 值都会随之缩放。
用 calc() + 媒体查询做线性插值（更平滑）
避免断点跳跃感，可结合 calc() 在区间内做简单线性计算，让字体大小随宽度连续变化：
- 例如：在 320px–750px 区间，让
font-size从 16px 线性增长到 37.5px（即 750 / 20，保持 1rem = 1/20 设计稿宽） - 写法示例：
@media screen and (min-width: 320px) and (max-width: 750px) {
:root {
font-size: calc(16px + (37.5 - 16) * ((100vw - 320px) / (750 - 320)));
}
}
注意：需确保单位统一（都用 px），且除数不为零；该方案在较老 Android 浏览器中可能不支持 calc() 内含 vw 的复杂表达式，建议加降级。
配合 JS 动态监听并更新（应对 resize 或横竖屏切换）
纯 CSS 媒体查询对 resize 事件或旋转屏幕（如 iPad 横屏）响应及时，但部分安卓 WebView 或旧浏览器可能有延迟。此时可用 JS 辅助触发重设：
- 监听
resize和orientationchange事件 - 读取
document.documentElement.clientWidth，按比例计算目标font-size（如clientWidth / 750 * 100） - 直接设置
document.documentElement.style.fontSize，无需操作 CSSOM
⚠️ 注意：JS 设置会覆盖 CSS 中的 :root 声明，因此建议只用 JS 或只用 CSS 媒体查询，避免冲突；若混合使用，CSS 应设为最低优先级（如不加 !important），JS 设置带内联样式则更高优先级。
实际开发中的关键细节
- 务必设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则 media query 的width可能基于缩放后视口，导致错乱 - 设计稿如果是 750px，推荐基准换算：1rem = 100px（即
font-size: 100px对应 750px 屏），那么 14px 文字就写0.14rem；也可用 PostCSS 插件（如postcss-pxtorem）自动转换 - 慎用
vh/vw直接设font-size（如font-size: 4vw），iOS Safari 在键盘弹出时视口高度突变，会导致文字闪动或错位
不复杂但容易忽略。
