应直接使用 clamp() 实现流体排版，它由浏览器运行时计算、无需 js、缩放平滑；scss 仅用于安全封装，如 fluid-font 函数自动推导 vw 系数，配合 fluid-type mixin 统一控制字号、行高与间距，并需确保根字号统一或弃用 rem 避免偏差。
直接用 clamp()，别绕弯写媒体查询
SCSS 本身不生成流体逻辑，它只是帮你把 clamp() 写得更安全、可复用。真正的流体行为由浏览器运行时计算，clamp(min, preferred, max) 是目前最可靠的方式——不需要 JS，不依赖断点数量，缩放平滑。你写一堆 @media 堆出来的响应式字号，远不如一行 font-size: clamp(1rem, 2.5vw, 1.5rem); 稳定。
@function 封装动态 clamp() 公式更可控
手动算 vw 系数容易出错（比如 1rem → 16px，2.5vw 在 1920px 下是 48px，但你要的是从 16px 到 24px 的区间）。用函数自动推导更靠谱：
@function fluid-font($min: 1rem, $max: 1.5rem, $min-vw: 320px, $max-vw: 1440px) {
$min-px: strip-unit($min) * 16;
$max-px: strip-unit($max) * 16;
$vw: ($max-px - $min-px) / ($max-vw - $min-vw) * 100;
@return clamp(#{$min}, #{$vw}vw, #{$max});
}
调用：font-size: fluid-font(1rem, 1.375rem, 320px, 1200px);
- 必须提前处理
rem→px转换，否则strip-unit(1rem)得到的是1，不是16 - 函数里没做单位校验，传错单位（如
16px）会导致计算崩掉 - 返回值是字符串，不能参与后续数学运算，仅用于属性赋值
用 @mixin 统一封装流体字号 + 行高 + 间距
单独控制 font-size 不够，line-height 和 margin 也得联动，否则小屏下文字挤成一团。一个带配套缩放的 mixin 更实用：
@mixin fluid-type($min-fs: 1rem, $max-fs: 1.5rem, $min-vw: 320px, $max-vw: 1440px) {
$fs: fluid-font($min-fs, $max-fs, $min-vw, $max-vw);
font-size: $fs;
line-height: calc(1.2em + 0.3vw);
margin-bottom: calc(0.5em + 0.2vw);
}
注意点：
-
line-height和margin用calc()直接写，不要塞进函数——Sass 无法在calc()里解析变量 -
0.3vw这类系数需实测：太大导致行高抖动，太小失去响应意义 - 该 mixin 不处理
font-weight或letter-spacing，这些要按设计系统单独定义
别让根字号（:root font-size）破坏你的流体公式
所有基于 rem 的 clamp() 都依赖 :root 的基准。一旦项目里写了 html { font-size: 18px; }，你的 clamp(1rem, 2vw, 1.5rem) 实际就变成 clamp(18px, 2vw, 27px)，而 2vw 还是按视口算的——最小值和最大值被拉宽，中间段被压缩，最终字号卡在边界不动。
解决方案只有两个：
- 统一用
rem控制根字号（例如:root { font-size: clamp(16px, 2.5vw, 20px); }），让整个缩放体系对齐 - 或彻底弃用
rem，全用px+clamp()（如clamp(16px, 4vw, 24px)），但会失去用户字体偏好适配能力
最容易被忽略的是第三方 UI 库悄悄重置了 html font-size，上线前务必检查 computed styles 中的根字号是否如预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
