HTML网页中不存在“弹性文字”标准概念，实际是通过rem+JS动态设置根字体或clamp()实现字体大小动态控制，flex本身不控制字号，font-size: flex等写法无效。
直接说结论：HTML网页中不存在“弹性文字”这个标准概念，所谓“弹性文字”实际是响应式排版中对字体大小的动态控制策略，核心靠 rem + JS 动态设置 <html> 根字体、或 clamp() 函数实现流体缩放，不是靠 flex 或 font-size: flex 这类无效写法。
为什么不能用 flex 控制文字大小
很多人搜“弹性文字”时误以为 display: flex 能让文字自动伸缩——这是根本性误解。flex 只作用于容器与子元素的布局行为，对单个文本节点的字号、行高、字间距完全无影响。浏览器不识别 font-size: flex、flex-font 等任何类似属性，写了就是无效 CSS。
clamp() 是目前最简洁可靠的流体字号方案
它用一个函数定义字号的最小值、首选值和最大值，浏览器按视口宽度线性插值计算，无需 JS：
.title {
font-size: clamp(1.25rem, 4vw, 2.5rem);
}上面这行的意思是：
• 视口很窄时（如手机），字号不低于 1.25rem（20px）
• 视口变宽，字号按 4vw 线性增长（即每 100px 宽度对应 4px）
• 但到了某宽度后，不再继续涨，上限卡在 2.5rem（40px）
立即学习“前端免费学习笔记（深入）”；
-
clamp()兼容 Chrome 88+、Firefox 79+、Safari 14.1+（2026 年已覆盖绝大多数用户） - 别用
minmax()替代——它只用于 Grid 轨道尺寸，不能用于font-size - 避免嵌套多个
clamp()或混用em/rem计算，容易触发意外重排
rem + JS 方案仍需保留，尤其要兼容老 WebView
某些 Android 旧版 WebView（如 Android 7–9 的系统浏览器）不支持 clamp()，此时必须回退到 JS 控制根字号：
function setRootFontSize() {
const width = document.documentElement.clientWidth;
// 按 375px 设计稿基准，1rem = 16px → 375/16 = 23.4375
const scale = width / 375;
document.documentElement.style.fontSize = `${16 * scale}px`;
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);关键点：
- 别用
window.innerWidth—— 它包含滚动条宽度，导致计算偏小 - 别在
DOMContentLoaded后才执行 —— 首屏文字会闪动，应尽早内联执行 - 若项目已用 PostCSS 插件（如
postcss-pxtorem），确保其基准值（rootValue）与 JS 中的 16 一致
文字“弹性”失效的三个高频原因
即使用了 clamp() 或 rem，文字仍可能看起来“不弹性”，常见于：
- 父容器设置了
overflow: hidden且未配white-space: nowrap，导致文字被截断而非缩放 - 文字外层有固定高度容器（如
height: 40px），而line-height未同步调整，造成视觉挤压 - 用了
font-size: 100%或font-size: medium这类相对/绝对关键字，绕过了 rem/clamp 的控制链
真正难的不是算出字号，而是让字号变化时，行高、字间距、容器留白、图标对齐全部同步响应——这些细节一旦漏掉，再“弹性”的字号也显得僵硬。
