flexbox 不控制字体大小，需用 clamp() + 容器查询按子项宽度响应式缩放文字，或用 rem + 媒体查询全局降级，避免直接使用 vw 导致换行错乱。
Flexbox 本身不控制字体大小，font-size 不会因为 display: flex 或 flex-grow 自动变化。想让文字在不同分辨率下“看起来合适”，必须显式设置响应式字号策略——否则小屏溢出、大屏过小、中屏换行错乱都是常态。
用 clamp() + 容器查询（@container）真正按 flex 子项宽度缩放
这是目前最匹配 Flex 场景的方案：文字只关心父容器宽，不看整个视口。前提是你用了现代浏览器（Chrome 110+、Firefox 119+、Safari 16.4+ 已支持）。
- 给 flex 容器加
container-type: inline-size，让它能被子元素“感知” - 把
font-size: clamp()写在 flex 子元素上（不是容器），例如标题或卡片内文字 -
clamp()的中间值别用vw，改用rem或计算后的百分比（如2.5cqw），cqw表示“容器宽度的 1%”，才是真·容器单位 - 避免在 flex 容器上直接设
font-size，否则所有子项被统一拉扯，失去独立响应能力
.card {
flex: 1;
container-type: inline-size;
}
.card h2 {
font-size: clamp(1rem, 2.5cqw, 1.5rem);
}
用 rem + 媒体查询做阶梯式降级（兼容性最强）
如果你还要支持 Safari 15、Edge 90 以下或某些政企内网环境，@container 无法用，那就退回到根字体控制法——它稳定、可预测、调试直观。
- 在
html上用媒体查询分段设font-size，比如@media (max-width: 768px) { html { font-size: 12px; } } - 所有文字用
rem，如font-size: 1.2rem，这样缩放是全局联动的 - 注意：Ant Design 等框架的
@font-size-base变量也要同步覆盖，否则组件内文字不跟着变 - 别在媒体查询里只改某个子元素的
px值，容易和 flex 布局的弹性行为冲突（比如flex-basis计算失准）
为什么别直接用 vw 配 flex 布局？
vw 响应的是整个视口宽度，而 flex 子项的实际宽度常远小于视口（比如三列卡片，每列只有 ~300px 宽）。结果就是：小屏手机上，font-size: 4vw 可能算出 16px，但卡片实际宽度才 320px，文字撑满后换行异常；桌面端视口 1920px，4vw 变成 77px，标题直接顶破卡片。
- 典型错误写法：
.card h2 { font-size: clamp(1rem, 4vw, 1.5rem); } - 更糟的是把它写在 flex 容器上，导致所有子项字号被同一套
vw绑定 - 如果非要用
vw，至少结合max-width限制容器宽度，再用 JS 动态注入style标签修正基准值（不推荐，增加运行时开销）
JS 动态调整（仅限复杂场景，慎用）
当容器尺寸受 JS 控制（比如拖拽面板、折叠侧边栏）、或需要像素级精确匹配时，CSS 方案会失效。这时才考虑 ResizeObserver。
- 监听 flex 子元素的
contentRect.width，而非 window.resize —— 后者太粗粒度 - 计算逻辑别写死比例，用
Math.min/Math.max包裹，防极端尺寸（如宽度为 0） - 别在每次回调里直接设
element.style.fontSize，优先更新 CSS 自定义属性（--text-scale），再用font-size: calc(1rem * var(--text-scale)); - 注意：SSR 页面首次渲染时 JS 还没执行，必须有 CSS fallback（比如媒体查询兜底）
真正难的不是选哪个方案，而是意识到：flex 容器的“弹性”和文字的“可读性”是两套独立系统，强行让它们耦合（比如靠 flex-grow 拉伸文字）只会让问题更隐蔽。先明确你到底要响应“容器宽度”还是“屏幕分辨率”，再决定用 @container、媒体查询，还是 ResizeObserver —— 混用反而更容易踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
