守住最小根字号是解决极小屏幕下rem渲染错位的根本方法，必须用px单位设clamp()下限（如12px），避免循环依赖，并校验box-sizing、第三方库干扰和viewport缩放。
极小屏幕下 rem 渲染错位、边框忽隐忽现、间距跳变，根本不是浏览器算错，而是 html { font-size } 被缩得太小，导致 1rem ，浏览器只能四舍五入或亚像素插值——精度问题从根上就失控了。守住最小根字号，是唯一可控的防线。
为什么 clamp() 的第一个参数必须是 px 单位
很多人写 font-size: clamp(1.2rem, 2.666vw, 16px)，结果在超小屏下依然失准。因为第一个参数 1.2rem 会回溯到当前 html 的 font-size 去计算，形成循环依赖：想靠它兜底，它自己却还没稳住。
正确做法是用绝对单位锚定下限：
-
clamp(12px, 2.666vw, 16px)→ 最小值 12px 铁板钉钉，1rem永远 ≥ 12px - 此时
0.1rem ≥ 1.2px，浏览器渲染误差被压进可接受范围（1.2px四舍五入为1px或2px，视觉波动可控） - 若你设计稿基准是
750px → 1rem = 100px，那最小值不能拍脑袋定12px，得反推：750px 屏最小应设多少？比如希望最小视口（240px）下1rem至少对应 12px，则系数 =12 / 240 × 100 = 5，即font-size: clamp(12px, 5vw, 16px)
别在 @media 里套 clamp()
媒体查询是静态断点，clamp() 是动态连续响应。两者混用不仅冗余，还会掩盖真实问题：
- 写了
@media (max-width: 320px) { html { font-size: clamp(12px, 2.666vw, 16px); } }，但clamp()本身已在所有宽度生效，这个@media完全没意义 - 更危险的是：某些旧版 Safari 对
clamp()解析不一致，若再嵌套媒体查询，可能直接忽略整个声明 - 真正该用媒体查询的地方，是给不支持
clamp()的浏览器降级：比如先写font-size: 14px，再覆盖font-size: clamp(...)
三个常被跳过的校验点，一漏就前功尽弃
设了 clamp(12px, ...) 只是起点。以下三处不检查，精度问题照样爆发：
-
box-sizing: border-box是否全局生效？若某个组件用了content-box，padding: 0.5rem在12px基准下是6px，但 content-box 模式会让总宽额外 +6px，布局偏移立刻放大 - 第三方 UI 库（如 Element Plus、Ant Design Mobile）是否偷偷重设了
html的font-size？它们的 reset.css 或初始化脚本可能覆盖你的clamp()，得查 DevTools 中html元素的 computed style 真实值 -
<meta name="viewport">是否漏了maximum-scale=1.0？用户双指缩放后，devicePixelRatio变化但clamp()不重算，误差会二次放大——这不是 bug，是未覆盖的交互路径
精度问题从来不是单点故障。它藏在 clamp() 的第一个参数里，躲在第三方库的 reset.css 后，也卡在 viewport 缩放没锁死的缝隙中。守住 12px 下限只是入场券，真正要盯住的是整条链路里所有能改 html font-size 的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
