css 相关操作

1
clamp(MIN, VAL, MAX)
2
clamp()函数接受三个用逗号分隔的参数，分别为最小值、首选值，最大值。
3

4
html{ font-size: 62.5%;}
5
p{ font-size: clamp(1.5rem, 2.5vw, 2.5rem); }

1
/_ @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 _/
2
:root {
3
--step--4: clamp(0.3619rem, -0.5704rem + 0.7769vw, 0.6144rem);
4
--step--3: clamp(0.4338rem, -0.8009rem + 1.0288vw, 0.7681rem);
5
--step--2: clamp(0.5206rem, -1.1017rem + 1.3519vw, 0.96rem);
6
--step--1: clamp(0.625rem, -1.4981rem + 1.7692vw, 1.2rem);
7
--step-0: clamp(0.75rem, -2.0192rem + 2.3077vw, 1.5rem);
8
--step-1: clamp(0.9rem, -2.7rem + 3vw, 1.875rem);
9
--step-2: clamp(1.08rem, -3.5862rem + 3.8885vw, 2.3438rem);
10
--step-3: clamp(1.2963rem, -4.7361rem + 5.0269vw, 2.93rem);
11
--step-4: clamp(1.555rem, -6.2242rem + 6.4827vw, 3.6619rem);
12
--step-5: clamp(1.8663rem, -8.1445rem + 8.3423vw, 4.5775rem);
13
--step-6: clamp(2.2394rem, -10.6191rem + 10.7154vw, 5.7219rem);
14
}

1
.header{
2
font-size: var(--step-0);
3
}