直接写 font-size: 16px 在手机上会看不清，因 px 是绝对单位，不响应系统设置、视口缩放及高 DPI 适配，且缺 viewport 标签时浏览器按 980px 渲染，导致实际可视尺寸过小。
为什么直接写 font-size: 16px 在手机上会看不清
因为 px 是绝对单位，不响应用户系统设置、不随视口缩放、也不适配高 DPI 屏幕。iOS 和 Android 用户若开启了「更大字体」辅助功能，px 字体会被强制截断或忽略缩放，导致小屏文字挤在一起甚至溢出容器。更关键的是：没有 ，浏览器会以 980px 宽度渲染，此时 16px 实际视觉尺寸可能只有物理像素的 1/2 —— 看似写了 16px，实际比 12px 还难读。
clamp() 是最简方案，但参数不能乱填
clamp() 的三段式结构（最小值、首选值、最大值）必须符合真实设备谱系，否则小屏撑满、大屏炸开。常见错误是把 vw 值设太高，比如 font-size: clamp(1rem, 5vw, 2.5rem)：在 414px 宽 iPhone 上，5vw ≈ 20.7px（≈1.3rem），已超过最小值；但在 2560px 宽显示器上，5vw = 128px，远超 2.5rem（≈40px），最大值形同虚设。
- 安全做法：用
clamp(1.125rem, 2.5vw + 0.5rem, 2.25rem)—— 加常量项让中段更平缓，避免线性陡升 - 移动端下限别低于
1.125rem（约 18px），否则 iOS Safari 会触发最小字号限制（强制 ≥16px） - 最大值建议 ≤
2.5rem（40px），再大易破坏行高节奏和视觉层级 - 务必测试
320px、768px、1200px三个典型宽度下的计算结果
用 rem 配合媒体查询时，只调 html 根字号
不要给每个元素重复写 @media，而是统一控制根元素，让所有 rem 值自动响应。但前提是 html { font-size: 100% } 或显式设为 16px，否则 Safari 可能继承系统缩放导致基准漂移。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 基础设置：
html { font-size: 16px; } - 手机：
@media (max-width: 480px) { html { font-size: 15px; } } - 平板：
@media (min-width: 481px) and (max-width: 1024px) { html { font-size: 17px; } } - 桌面：
@media (min-width: 1025px) { html { font-size: 18px; } } - 注意：这些值不是拍脑袋定的，要对应你设计稿中「正文在各端的理想物理像素」，比如手机正文希望是 16–18px，那就反推 rem 基准
混合单位时，line-height 必须用无单位数值
如果字体用了 clamp() 或动态 rem，而 line-height 写成 24px 或 1.5em，就会出现小屏行高过紧、大屏行高松散的问题。因为 em 依赖父级，嵌套深了容易失控；px 则完全脱离字体变化。
- 正确写法：
line-height: 1.6;（纯数字，表示倍数） - 它会自动跟随当前
font-size计算，font-size: 1.5rem→line-height: 1.6 * 1.5rem - 标题可略紧凑（
1.2–1.3），正文推荐1.5–1.7，小字注释可用1.4 - 千万别用
line-height: 1.5em—— 这等于1.5 * 父元素字号，和当前元素字体大小无关
真正难的不是写出 clamp()，而是确认最小值是否满足 WCAG 1.4.4（调整文本尺寸不丢失内容），以及最大值是否在 2560px 宽度下仍保持视觉平衡。很多团队测到 1440px 就停了，结果在 4K 屏上标题大得像海报——这得靠真实设备或 Chrome DevTools 的 device emulation 多跑几轮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
