长度单位：这个尺寸跟谁变化？

第 7 课 7 / 17 ｜编码：L07-10

为黄梅戏分享会建立统一样式

先看尺寸以什么为参照，再用 clamp() 限制变化范围。

html { font-size: 20px; }
.title { font-size: 2rem; }
.notice { font-size: 16px; padding: 1rem; }
.panel { width: 80%; }

px 是 CSS 像素，不一定对应一个屏幕物理像素。
rem 通常理解为 root em，以根元素 html 的字号为参照。本例 2rem 为 40px，1rem 为 20px；不是以父元素或当前元素字号为参照。
本例普通块的 width: 80% 以包含块宽度为参照。其他属性的百分比参照需要分别判断。

vw 是 viewport width（视口宽度）相关的单位。视口可理解为浏览器显示网页的区域，不一定是整个屏幕。

1vw = 视口宽度的 1%。视口宽 1000px 时，5vw 是 50px；视口宽 400px 时，5vw 是 20px。

h1 {
  font-size: 5vw;
}

窗口变宽，标题字号随之变大；只用 vw，可能在窄窗口中过小、宽窗口中过大。

clamp 读作 /klæmp/，其中 a 与 cat 中的 a 发音相同，结尾为 mp。原意是“夹紧”，可以联想为把数值夹在上下限之间。

写法是 clamp(最小值, 首选值, 最大值)。下面优先取 5vw，但字号不小于 24px，也不大于 48px。

h1 {
  font-size: clamp(24px, 5vw, 48px);
}

同一条规则，在不同视口宽度下的结果
视口宽度	5vw 的结果	最终字号	原因
400px	20px	24px	不能小于最小值
600px	30px	30px	位于上下限之间
1200px	60px	48px	不能大于最大值

区别：rem 跟随根元素字号，vw 跟随视口宽度；clamp() 不是单位，而是限制数值范围的 CSS 函数。

拓展：将 rem 与 vw 组合使用

html { font-size: 20px; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

本例最小字号是 40px，最大字号是 70px，中间优先取 5vw。改变根元素字号会改变上下限；改变视口宽度会改变 5vw 的值。