CSS 如何实现响应式字体大小？

Question

CSS 如何实现响应式字体大小？

仓乃文 · Accepted Answer

使用 CSS clamp() 函数可以设置字体大小的最小值和最大值，中间值随视口宽度自动缩放，无需媒体查询。

```css
.title {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
```

clamp() 三个参数含义：
```css
/* clamp(最小值, 首选值, 最大值) */
.text {
  font-size: clamp(16px, 2.5vw, 24px);
}
```

补充说明：
- clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))
- 首选值通常使用 vw 单位，随视口宽度变化
- 最小值保证小屏幕字体不会太小，最大值保证大屏幕字体不会太大
- 兼容性：所有现代浏览器均支持，IE 不支持