直接用 calc() 套媒体查询值行不通，因缺少边界控制且 calc() 不支持条件判断；需结合 CSS 变量、calc() 与 clamp() 实现响应式字体，并注意单位显式声明与兼容性 fallback。
为什么直接用 calc() 套媒体查询值行不通
很多人试过写 font-size: calc(16px + 2vw)，发现字号确实随视口变大而增大，但很快会发现：在小屏上字体可能太小（比如手机上缩到 12px 以下），大屏又撑得过大（比如 4K 屏冲到 32px+）。这不是 calc() 本身的问题，而是缺少边界控制——CSS 不支持条件判断，calc() 里也不能嵌套 min() 或 max()（旧版浏览器不支持，且部分写法会失效）。
真正可行的路径是：用 CSS 变量存「基准值」和「缩放系数」，再用 calc() 组合，最后靠 clamp() 或媒体查询兜底。但注意：clamp() 是现代方案，IE 和部分旧安卓 WebView 不支持，得有 fallback。
用 CSS 变量 + calc() + clamp() 实现平滑响应式字体
核心思路是把字体大小拆成三部分：最小值、理想值（基于视口动态算）、最大值。CSS 变量用来管理这些值，方便复用和后期调整。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义三个变量：
--fs-min（最小字号）、--fs-max（最大字号）、--fs-basis（基准视口宽度，比如320px或100vw） - 用
clamp()直接包裹计算式：font-size: clamp(var(--fs-min), calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * ((100vw - var(--fs-basis)) / (1920 - 320))), var(--fs-max)); - 更实用的简化写法（推荐）：
font-size: clamp(1rem, 1.25rem + 0.5vw, 1.5rem);—— 这里1.25rem + 0.5vw就是线性插值的核心，clamp()自动限幅 - 如果必须兼容不支持
clamp()的环境，就用媒体查询 + 变量覆盖：@media (max-width: 320px) { :root { --fs-responsive: 1rem; } }，再统一用font-size: var(--fs-responsive);
calc() 里引用 CSS 变量的坑：单位必须显式、不能省略
这是最常踩的错误。下面这行会失效：font-size: calc(var(--fs-base) + 0.25vw);，如果 --fs-base 定义的是 1rem 没问题，但如果定义成 16（漏了单位），整个 calc() 就会计算失败，浏览器回退到初始值或继承值。
关键规则：
- CSS 变量里的数值，只要参与
calc()计算，就必须带单位（px、rem、vw等），不能只写数字 - 不同单位不能混加减（
1rem + 10px合法，但1em + 10px在某些上下文中可能因计算时机出错，建议统一转为rem或px） - 变量名不要用连字符开头（如
--16px），部分解析器会误判为负数；用--fs-16更安全
性能与可维护性：别在每个选择器里重复写 calc()
有人为了“灵活”，给每个标题都写一遍 font-size: clamp(...)，结果改一个参数要搜全项目替换。更合理的方式是集中管控变量，并通过层级继承生效。
推荐结构：
- 在
:root定义响应式字体变量：--fs-h1: clamp(1.5rem, 2rem + 0.5vw, 3rem); - 在组件或区块级作用域里覆盖变量（如深色模式下微调）：
.article { --fs-h1: clamp(1.45rem, 1.95rem + 0.5vw, 2.9rem); } - 样式中只写：
h1 { font-size: var(--fs-h1); }—— 清晰、易查、可被 DevTools 实时编辑 - 避免在
calc()里嵌套过多变量运算（如calc(var(--a) * var(--b) + var(--c))），部分浏览器解析优先级不一致，可能导致意外回退
真正难的不是写出那行 clamp()，而是想清楚「这个字体在 320px 宽度下最小能多小」「在桌面端最大允许多大」「中间段是否需要非线性过渡」——这些业务逻辑决定了变量取值，而不是技术本身。
