clamp
clamp 解释
clamp()函数主要用于响应式前端页面中，比如控制字体大小等。
1
2
3
4
5
| clamp(MIN, VAL, MAX)
clamp()函数接受三个用逗号分隔的参数，分别为最小值、首选值，最大值。
html{ font-size: 62.5%;}
p{ font-size: clamp(1.5rem, 2.5vw, 2.5rem); }
|
我们知道 vw 是一种视窗单位，能实现页面内的字体大小跟随视口大小变化而改变。如上定义的字体大小取决于两个方面，浏览器视口大小和页面基础字体大小。
分析：
我们设置基础字体为 html{ font-size: 62.5%;}，浏览器默认字体大小为 16px，即基础字体为 16×62.5% = 10px。则 clamp()函数定义的最小尺寸为 1.5rem = 15px，最大字体尺寸为 2.5rem = 25px。
当视口大小为 640px 时（iphone5 机型），则 100vw=640px，推导出 1vw=6.4px，则 2.5vw = 16px。因为 16px > 15px，则此时字体大小为 16px，即首选值。
当视口大小为 1024px 时（ipad 机型），100vw = 1024px，推导出 2.5vw = 25.6px。因为 25.6px 大于 clamp()函数设置的最大值 25px，则此时字体大小只能为最大值 25px。
clamp 自动生成
网址：https://utopia.fyi/type/calculator?c=1920,12,1.2,2440,24,1.25,6,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
将页面下方 CSS Generator 复制到项目中（一般放在全局的 css 文件里）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /_ @link https://utopia.fyi/type/calculator?c=1920,12,1.2,2440,24,1.25,6,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 _/
:root {
--step--4: clamp(0.3619rem, -0.5704rem + 0.7769vw, 0.6144rem);
--step--3: clamp(0.4338rem, -0.8009rem + 1.0288vw, 0.7681rem);
--step--2: clamp(0.5206rem, -1.1017rem + 1.3519vw, 0.96rem);
--step--1: clamp(0.625rem, -1.4981rem + 1.7692vw, 1.2rem);
--step-0: clamp(0.75rem, -2.0192rem + 2.3077vw, 1.5rem);
--step-1: clamp(0.9rem, -2.7rem + 3vw, 1.875rem);
--step-2: clamp(1.08rem, -3.5862rem + 3.8885vw, 2.3438rem);
--step-3: clamp(1.2963rem, -4.7361rem + 5.0269vw, 2.93rem);
--step-4: clamp(1.555rem, -6.2242rem + 6.4827vw, 3.6619rem);
--step-5: clamp(1.8663rem, -8.1445rem + 8.3423vw, 4.5775rem);
--step-6: clamp(2.2394rem, -10.6191rem + 10.7154vw, 5.7219rem);
}
|
使用：
1
2
3
| .header{
font-size: var(--step-0);
}
|
微信
支付宝
