clamp() + rem 是最稳最轻量的自适应方案，但需设对根字号、参数顺序及 viewport meta；小屏慎用 vw 避免低于 12px，推荐 clamp(14px, 2.5vw, 18px)；根字号宜用 clamp(14px, 2.5vw, 16px)；表格优先调 layout 与换行而非字号。
直接用 clamp() + rem 是当前最稳、最轻量的方案，但必须设对根字号、写对参数顺序，且不能漏掉 <meta name="viewport"> —— 漏了它，所有 vw/rem 都按桌面视口算，自适应当场失效。
为什么 clamp(16px, 4vw, 32px) 在小屏上字反而看不清
常见错误是把 4vw 当成“安全值”，却没算实际像素：在 320px 宽手机上，4vw = 12.8px，而 Chrome 强制最小渲染为 12px，再加系统缩放或字体抗锯齿衰减，文字就发虚、难辨认。
- 最小值别低于
12px，推荐从14px起步（如clamp(14px, 2.5vw, 18px)） - 首选值用
vw时，系数要保守：正文用2.5vw，标题可用4vw～6vw，但得同步测 iPhone SE（375px）和 Android 小屏（320px） - 混用单位有风险：Safari 14.0 之前解析
clamp(16px, 4vw, 2rem)可能出错，统一用rem或统一用px/vw - 旧版 Android WebView（6–9）完全不支持
clamp()，必须加 fallback：font-size: 16px; font-size: clamp(...);
html { font-size } 设多少才真正“自适应”
设死 html { font-size: 16px } 就等于放弃弹性；设成 clamp() 才让 rem 真正活起来。但注意：根字号本身也得有上下限，否则大屏下 2rem 标题可能撑满半屏。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐写法：
html { font-size: clamp(14px, 2.5vw, 16px); }—— 这样1rem在小屏是 14px，大屏封顶 16px，中间平滑过渡 - 别用
calc(100% + 2vw)：百分比基于父元素（即浏览器默认 16px），结果不可控，且不响应系统字号放大 - 如果设计稿基准是 750px，可用
clamp(14px, 1.866vw, 18px)（因为 750 × 0.01866 ≈ 14），比硬套公式更直观 - 所有文本元素统一用
rem，避免混用em：嵌套深了em会指数级放大，调试时根本算不清最终像素
表格里文字“看起来小”，调 font-size 反而更糟
表格文字“小”往往不是字号问题，而是列宽被长文本（如 UUID、URL）撑开，导致行高被迫拉高、视觉稀释；或小屏下强行缩放让数字模糊。浏览器优先保表格行列对齐，不是保文字大小。
立即学习“前端免费学习笔记（深入）”；
- 先稳布局：
table { table-layout: fixed; width: 100%; }，再给td, th设word-break: break-word; white-space: normal; - 图片必须加
max-width: 100%; height: auto;，否则顶高整行，文字显得更挤 - 状态、金额等关键字段才微调字号，比如：
.status-cell { font-size: 1.1rem; font-weight: 600; }，配合媒体查询只在max-width: 480px下生效 - 绝对不要用 JS 动态改
style.fontSize：重排开销高，且无法响应横竖屏切换或地址栏收起
真正难的不是写出 clamp()，而是判断什么时候该用它、什么时候该去调 table-layout 或 word-break。自适应的本质，是让文字在可用空间里保持可读，而不是无差别缩放——这点最容易被忽略，也最影响实际体验。
