应优先调小html根元素font-size基准值并配合clamp()或媒体查询分层控制，而非滥用vw或rem；需确保viewport声明正确、单位统一、标题层级重置、窄区域禁用vw、按钮文字保底14px。

直接调小 html 根元素的 font-size 基准值，再配合 clamp() 或媒体查询做分层控制——不是所有“太大”都该用 vw 或删 rem，多数是基准设高了或没兜底。

为什么手机上文字看起来特别大？先查 viewport 和 html font-size

很多所谓“字体太大”，其实是浏览器强制缩放导致的视觉错觉。iOS Safari 在没声明 时，会以 980px 宽度渲染，再整体缩小显示，这时你写的 2rem 看起来像 1.2rem 那么小，开发者误以为“要调大”，结果在桌面端窄窗口下又爆大。

• 必须确保 里有且仅有一条 viewport 声明，且写在所有 CSS 之前
• html { font-size: 16px; } 是常见基准，但如果你项目默认设了 20px 或 112.5%，那所有 rem 都会同比放大——直接改这里最省事
• 别用 body { font-size: 1.2rem; } 再让子元素用 em，这等于套了两层放大，移动端极易失控

clamp() 参数填错会让字体“锁死不动”，不是不生效而是没进入插值区间

clamp(1.5rem, 4vw, 3rem) 看着合理，但实际只在约 375px–750px 视口内线性变化，小于 375px 永远取 1.5rem，大于 750px 永远取 3rem。iPhone SE（320px）和 4K 屏（3840px）都拿不到中间值，字就“卡住”了。

• 反推有效区间：用 min / vw系数 和 max / vw系数 算出起止视口宽，比如 clamp(1.25rem, 2.5vw, 2.5rem) 的生效区间是 480px–1000px
• 想覆盖主流设备（320px–1440px），推荐写成 clamp(1.125rem, 0.375vw + 0.24rem, 1.375rem) 这类带偏移的 calc 形式
• 单位必须统一：不要混用 px 和 rem，Safari 14.1 之前对混用解析不稳定；em 别进 preferred 项，它依赖父级，链式继承容易断

标题和正文字号失衡？重置 h1–h6 的 font-size 而非依赖浏览器默认

浏览器 UA stylesheet 给

设的是 2em（≈32px），

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

是 1em（≈16px），比例是 2:1；但你设了 html { font-size: 20px; } 后，

就变成 40px，而正文可能还是 1rem → 20px，比例拉到 2:1 变成 2:1，视觉节奏崩了。

• 统一用 rem 重写标题层级：h1 { font-size: 2.5rem; }、h2 { font-size: 2rem; }、p { font-size: 1.125rem; }
• 别只调 font-size，顺手重置 margin 和 font-weight，否则标题间距忽大忽小，阅读流断裂
• 正文段落慎用 vw 或 clamp()，小屏下易低于 14px 导致可读性差；优先用媒体查询分档：@media (max-width: 480px) { p { font-size: 1rem; } }

侧边栏、卡片标题、按钮文字异常放大？vw 单位根本不认父容器宽度

font-size: 4vw 意思是“视口宽度的 4%”，不是“父容器宽度的 4%”。一个 240px 宽的 sidebar 在 1920px 屏幕上，文字会是 76.8px，比主内容区还大两倍——这不是 bug，是设计如此。

• 窄区域文字一律禁用 vw，改用 rem + 媒体查询，例如：.sidebar h3 { font-size: clamp(0.875rem, 1.125rem, 1rem); }
• 真要流体缩放，且支持现代浏览器，可用 @container 查询（需父容器设 container-type: inline-size），但别在 或 flex 子项里硬套
  按钮文字必须保底线：哪怕用 clamp()，也要确保最小值 ≥ 14px（iOS 最小可读尺寸），例如 clamp(0.875rem, 2vw, 1.125rem) 在 320px 下是 14px，安全

  真正难的不是写对 clamp()，而是判断哪一层该用响应式、哪一层该锁死——标题可以流动，正文需要稳，按钮文字必须可点可读。别让“技术可行”压倒“用户可读”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！