css - 字体大小的 CSS clamp() 公式

问题描述

我试图了解这个工具如何计算出clamp() 函数的第二个参数：https ://fluid-typography.netlify.app/ 。有人能解释那部分吗？

我理解第一个和第三个参数，因为它们是不言自明的。令人困惑的是第二个参数。

1.5rem视口宽度为的最小尺寸700px。

3rem视口宽度为的最大尺寸1000px。

font-size: clamp(1.5rem, 8vw - 2rem, 3rem);

标签： css

公式是font-size = Xvw - Yrem。在700px视口 ( 100vw = 700pxso 1vw = 7px) 我们想要1.5rem( 1.5rem = 24px) 并且在1000px( 100vw = 1000pxso 1vw = 10px) 我们想要3rem( 3rem = 48px) 所以：

24px = X*7px  - Y*16px
48px = X*10px - Y*16px

解方程，你会得到X = 8和Y = 2

您有一个线性函数来定义font-size介于700px和之间1000px。在这个范围之外，我们希望字体大小是固定的，这就是我们使用clamp()最小值和最大值的原因

css - 字体大小的 CSS clamp() 公式

问题描述

解决方案

推荐阅读