一行代码搞定 font-size 响应式

发布时间：2024-03-14 10:18:48 来源：网络

.

定义和用法 font-size 属性可设置字体的尺寸。说明该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或

定义和用法

font-size 属性可设置字体的尺寸。

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（iframe）小了但字体大了怎么办。网上找了很多代码都很长，个人参考了资料后实现了一个一行代码 font-size 响应式。

html {
    font-size: clamp(12px, calc(7px + 0.390625vw), 24px);
}

在 <html> 标签中定义是为了定义全局字体基准大小，目前开发几乎所有的字体都用 rem 作为单位，而 rem 单位代表的是全局字体大小的多少倍，所以只要设置全局大小整个页面所有 rem 都会跟着相应。
clamp 三个参数分别是最小值、相对值和最大值，如果相对值小于最小值则返回最小值，如果相对值在最大值最小值之间则返回相对值，如果相对值大于最大值则返回最大值。这样就限定了可缩放大小的范围。
calc(7px + 0.390625vw) 则代表自起始值开始，根据屏幕变化量增加像素数，0.390625vw 的公式是 (最大屏幕字体大小-最小屏幕字体大小)/(最大屏幕宽度-最小屏幕宽度) * 100，当然不乘 100 可以使用 0.00390625%