clamp()是纯CSS响应式字体函数，通过“最小值、首选值、最大值”三参数实现平滑缩放，比media query更简洁自然；需注意单位统一、vw基准、可读性下限及兼容性降级。
直接用 clamp() 配合 vw 是最轻量、最可靠的方式，无需 JS 监听 resize，也不依赖媒体查询断点切换。
为什么不用 media query 做多断点字体适配？
媒体查询只能做“阶梯式”切换，比如 320px 用 14px、768px 用 16px、1024px 用 18px——中间是跳变的，视觉不连贯。更麻烦的是：一旦设计稿新增断点，就得补一堆 @media 规则，变量名、计算逻辑容易错乱。实际项目里，clamp(14px, 2.5vw, 18px) 一条就能覆盖 560px–720px 区间的平滑过渡，省事且可预测。
clamp() 的三个参数必须同类型，且不能混用单位
clamp() 第一个参数是下限，第二个是首选值（带视口单位），第三个是上限。三者必须都是长度单位（px、rem、em），不能写成 clamp(14px, 2.5vw, 1.125rem)——浏览器会直接忽略整条声明。
- 正确写法：
html { font-size: clamp(14px, 2.5vw, 18px); } - 错误写法：
clamp(14px, 2.5vw, 1.125rem)（单位不一致） - 错误写法：
clamp(14, 2.5vw, 18px)（第一个缺单位）
CSS 变量必须参与 calc() 才能当长度用
定义了 --fs-base: 16 这样的纯数字变量后，不能直接写 font-size: var(--fs-base)px——语法非法。也不能写 font-size: var(--fs-base) px（空格不被解析）。必须用 calc() 显式参与运算：
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
font-size: calc(var(--fs-base) * 1px); - ❌ 错误：
font-size: var(--fs-base)px; - ❌ 错误：
font-size: var(--fs-base) px;
这个限制常被忽略，尤其在配合 JS 动态注入变量时，容易卡在“变量明明设了，但字体没变”上。
高 DPR 屏幕下 1px 边框发虚，和字体适配有关联吗？
有间接关联。当根字号用 clamp() 动态缩放后，所有 rem 单位也会同比例缩放，包括 border-width。如果边框写死 1px，在 2x 屏上就会显得过粗；如果用 0.0625rem（即 1px ÷ 16px 基准），那根字号一变，边框就跟着变——可能从 0.5px 变成 1.2px，反而更难控制。稳妥做法是：边框统一用 px，再用伪元素 + transform: scaleY(0.5) 修复高 DPR 发虚问题，别让它和字体缩放逻辑耦合。
