clamp()实现流式字号需min/max用绝对单位保边界、preferred用vw+固定偏移控曲线，单位须统一，safari等旧浏览器需层叠fallback；line-height宜用无单位值联动缩放。
用 clamp() 实现基础流式字号，但别只靠它
直接写 font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem); 能让文字在小屏不糊、大屏不撑，但它只是单一线性映射，无法覆盖「320px→14px，768px→16px，1200px→18px」这种三段式需求。实际项目中，你得先明确字号断点区间，再决定是纯 CSS 运行时处理，还是配合 Sass 编译期插值。如果项目已用 Sass，且需要把字号传给 sgl-heading 这类排版工具，clamp() 返回的带单位字符串会直接导致混入崩溃——它不是数值，不能参与运算。
在 Sass 中写 interpolate() 函数时必须处理单位与边界
真实可用的线性插值函数要防越界、保单位一致、适配下游工具。下面这个版本经过多个生产项目验证：
@function interpolate($start-val, $end-val, $start-viewport, $end-viewport, $current-viewport) {
$ratio: clamp(0, ($current-viewport - $start-viewport) / ($end-viewport - $start-viewport), 1);
@return ($start-val + ($end-val - $start-val) * $ratio);
}
使用时注意：
- 所有输入参数单位必须统一，比如全用
px；混用px和vw会报Incompatible units - 若目标是
rem，得先换算基准：14px → 0.875rem（假设根字体为 16px），再插值 - 传给
sgl-heading前必须剥离单位：$val: $val / 1rem，否则混入内部计算会出错 -
clamp(0, ..., 1)不可省，否则视口超出区间时返回负数或超 1 的比率，导致字号反常缩放
流式不只是字号，行高和间距也得同步响应
只调字号，行高不变，小屏上文字会挤成一团；只调行高，字号不动，大屏又空得离谱。真正可用的系统要把三者耦合起来：
- 行高建议用无单位值（如
1.5）+clamp()组合：例如line-height: clamp(1.4, 1.4 + 0.02vw, 1.6); - 段间距、字间距优先用
em或rem，它们随字号自动缩放，比固定px更可靠 - 若用 Sass 插值控制
margin，记得和字号用同一套断点逻辑，否则视觉节奏会断裂 - 中文排版特别注意：小屏下
line-height下限不能低于1.3，否则字重叠加易糊
移动端真机测试时，100vw 可能不准
iOS Safari 在地址栏收起/展开时会触发视口重算，100vw 瞬间跳变，导致 clamp() 或 interpolate() 计算抖动。这不是 bug，是浏览器行为。解决办法很务实：
- 避免在关键标题上用
100vw做插值主变量，改用设备独立像素（DIP）更稳的断点，比如320px、768px、1200px - 对导航栏、按钮等交互密集区，宁可用媒体查询兜底，也不赌
clamp()在所有 iOS 版本下的瞬态表现 - 真机调试时打开 Safari 开发者工具，手动拖动视口宽度看变化曲线，比模拟器更准
流式排版最易被忽略的，是它和字体加载、字体度量、甚至系统缩放设置的隐式耦合。一套系统上线前，至少要在 iOS 17+、Android Chrome 120+、Windows Edge 最新版上，用 100%、125%、150% 系统缩放各跑一遍文字渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
