一行代码搞定 font-size 响应式
前言
公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（iframe）小了但字体大了怎么办。网上找了很多代码都很长，个人参考了资料后实现了一个一行代码 font-size 响应式。
TL;DR
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%
参考
本文作者：Aoba_xu
本文链接：https://www.cnblogs.com/aobaxu/p/17384568.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步