根本原因是html font-size设得过小导致1rem跌破1px，引发渲染四舍五入；clamp()通过设定最小值（如12px）守住1rem下限，使0.1rem≥1.2px，从而控住精度误差。
rem在极小屏幕下计算精度失准的根源
根本不是浏览器算错，而是html { font-size }被设得太小，导致1rem对应的实际像素值跌破1px。比如设计稿按375px基准、设html { font-size: 10px }，那在240px宽的设备上，font-size被缩到6.4px——此时0.1rem = 0.64px，浏览器渲染时只能四舍五入或亚像素插值，视觉上就出现“该对齐的没对齐”“边框忽隐忽现”“间距跳变”。
clamp()为什么能缓解这个问题
clamp()不是万能补丁，但它把根字号控制从“纯比例缩放”变成“有边界的弹性缩放”。关键在于它能守住下限，避免font-size无限塌缩。
- 错误写法：
font-size: calc(100vw / 37.5)→ 在240px屏上直接得6.4px，无保护 - 正确写法：
font-size: clamp(12px, 2.666vw, 16px)→ 无论视口多窄，font-size最低卡在12px，1rem最小也等于12px，0.1rem = 1.2px，渲染误差可控 - 注意：第一个参数（最小值）必须是px单位，不能写
clamp(1.2rem, ...)，否则又绕回基准漂移的老问题
配合rem使用时clamp的典型配置陷阱
很多人抄了clamp(14px, 2.5vw, 18px)就完事，但没校验它是否真匹配你的设计稿换算逻辑。
- 如果你的设计稿是750px宽、约定
1rem = 100px，那理想中375px屏应得font-size: 50px；而2.5vw在375px屏上是9.375px，差了5倍——这说明vw系数必须重算：750px → 100px ⇒ 系数 = 100 / 750 × 100 = 13.333，即font-size: clamp(12px, 13.333vw, 16px) - 别在
@media里再套clamp()，CSS媒体查询无法动态响应缩放，而clamp()本身已具备响应能力 - 旧版Safari（clamp()，若需兼容，得用JS fallback：检测
CSS.supports('font-size', 'clamp(1px, 1vw, 1px)')，不支持时走document.documentElement.style.fontSize手动设
真正容易被忽略的细节
精度问题从来不是孤立的。当你用clamp()稳住font-size下限，还得同步检查三处：
-
box-sizing: border-box是否全局生效？否则padding: 0.5rem在12px基准下是6px，但content-box模式会让总宽额外+6px，布局偏移立刻放大 - 第三方UI库（如Element Plus）是否覆盖了
html的font-size？有些组件会自作主张重设根字号，直接废掉你的clamp() -
viewport是否漏了maximum-scale=1.0？用户双指缩放后，devicePixelRatio变化但clamp()不重算，误差会二次放大
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
