可利用ResizeObserver监听容器宽度变化动态计算字体大小，通过线性插值公式fontSize=minSize+(width-minWidth)×(maxSize-minSize)/(maxWidth-minWidth)实现响应式缩放，并用Math.min/max限制边界。
可以利用 ResizeObserver 监听容器尺寸变化，动态计算并设置字体大小，实现真正的响应式文字缩放，无需依赖窗口大小或媒体查询。
监听目标容器的宽度变化
ResizeObserver 能高效监听任意 DOM 元素的尺寸变动（包括宽高、边框、内边距等）。只需传入一个回调函数，在容器尺寸更新时触发：
- 创建实例时传入回调，该回调接收
entries数组，每个 entry 包含target（被观察元素）和contentRect（当前布局尺寸） - 推荐只关注
contentRect.width，避免因高度变化或滚动条干扰导致不必要的重算 - 注意：不要在回调中直接修改被观察元素的样式（如 font-size），否则可能触发同步重排，应确保逻辑轻量
设定字体缩放的基准与范围
合理定义“最小宽度→最小字号”和“最大宽度→最大字号”的映射关系，是自动缩放的关键。常用线性插值方式：
- 例如：容器宽度在 320px 时设为 14px，在 1200px 时设为 24px
- 用公式
fontSize = minSize + (width - minWidth) * (maxSize - minSize) / (maxWidth - minWidth)计算实时字号 - 务必加边界限制（
Math.min/Math.max），防止超小屏下字号过小（如
应用到目标文本元素并避免抖动
将计算出的字号赋给目标元素（如 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 或
）即可生效，但需注意稳定性：
- 使用
px或rem单位均可；若用rem，建议保持根字体默认（html { font-size: 16px; }），再动态改document.documentElement.style.fontSize影响全局，但更推荐局部控制 - 为防连续触发导致视觉抖动，可添加简单节流（如用
requestAnimationFrame包裹更新逻辑） - 首次初始化时手动调用一次计算，确保页面加载后立即适配，不等待第一次 resize
完整示例代码（简洁可用）
以下是一段可直接嵌入项目的脚本：
${fontSize}px不复杂但容易忽略：确保容器设置了明确的 width（如百分比、flex 或 grid 布局下的有效尺寸），否则 contentRect.width 可能恒为 0 或意外固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
