HTML文字大小调整新技巧详解

常见写法包括：

• font-size: 16px —— 绝对像素值，精确但不利于缩放
• font-size: 1.2em —— 相对于父元素字体大小，适合嵌套布局
• font-size: 1.2rem —— 相对于根元素（）字体大小，响应式首选
• font-size: clamp(1rem, 2.5vw, 1.5rem) —— HTML5 + CSS 新特性，实现流体字号（下文细说）

clamp() 是 HTML5 时代调文字大小的核心新能力

注意：clamp() 是 CSS 函数，不是 HTML5 新标签，但它在 HTML5 文档中被广泛采用，是目前解决“小屏太小、大屏太大”问题最简洁的方案。

它的语法是 clamp(min, preferred, max)，浏览器会根据视口动态插值：

h1 {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
}

上面这行的意思是：字号最小不小于 1.2rem，最大不超过 2.5rem，在中间区间按 4vw 线性缩放。实际效果比媒体查询更平滑，代码量更少。

容易踩的坑：

• clamp() 在 IE 中完全不支持，Safari 13.1+ 才开始稳定支持
• 三个参数单位最好统一（如都用 rem 或都用 vw），混用可能导致意外计算
• 不要在 font-size 里嵌套另一个 clamp()，CSS 不支持递归

别再用 、 标签调大小

这段字略小

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }