计算具有不同 :root 字体大小的流体排版的 css lamp() 首选值

Question

例如，对于 h1 样式：

我有以下不同的：根字体大小：

• 700px - 1599px，字体大小：15px（1rem = 15px）
• 1600px - 1920px，字体大小：17px（1rem = 17px）

对于 h1，我希望最小字体大小为 50px，最大字体大小为 280px，并且我希望它们分别在 700px 视口宽度和 1920px 视口宽度处达到它们的点，所以我相信我知道Clip() 的最小值和最大值应该是多少：

clamp(3.333rem, *looking for this value*, 16.47rem)

，50px（最小字体大小）/15px（：700px视口宽度处的根字体大小）为3.333rem，280px（最大字体大小）/17px（：1920px视口宽度处的根字体大小）为16.47rem 错了。请参阅下面的编辑。

我遇到的问题是我不知道如何计算中间的首选值。我知道有类似这样的计算器，而且我能够接近，但我只是猜测和检查，它只占整个视口宽度的单个：根字体大小。

有没有办法找到一个通用的解决方案来使用我描述的不同的根尺寸来计算这个首选值？

编辑：我在这个问题上取得了一些进展，并找到了此示例的正确值，但我仍然不确定如何为其他字体大小生成它们。

实现我所描述的上述值的正确的钳位（）是

clamp(3.241rem, 18.857vw - 5.32rem, 18.15rem);

。我通过以下步骤到达这里：

1. 计算 :root 字体大小的加权平均值。我需要使用的实际 :root 字体大小是

   15.427px

   （15px 覆盖了我试图映射首选值的视口范围的大约 73.68%，所以我根据它计算了加权平均值）。

   Weighted Average=(0.73688525⋅15)+(0.26311475⋅17)

2. 通过将基本字体大小（15.427）乘以某个 rem 值（通过猜测和检查得出），添加最大字体大小（280），除以最大视口宽度，然后乘以计算流体视口大小（18.857）乘以 100 即可进入大众汽车单位。

   18.857 = (((15.427 * 5.32) + 280) / 1920) * 100

3. 最小和最大值就是最小和最大字体大小除以 :root font-size

不过，我仍然不明白 5.32rem 值的重要性，而且我不知道如何为具有不同最小值和最大值的其他字体大小生成正确的值，以便这些值映射在相同的视口宽度范围内。

如果有帮助的话，我找到了另一个适用于最大字体大小 100px 和最小字体大小 40px 的钳位值，映射到相同的视口范围：

clamp(2.593rem, 4.92vw + 0.36rem, 6.482rem)

我看不清图案。

Answer 1

我相信我已经为后来进来的人解决了这个问题。我认为这里的结果与我发布的猜测和检查值之间的差异可以归因于四舍五入。如果您的

$relative-size

值为正，则应从钳位中首选值中的

$fluid-size

中减去它，如果为负，则将它们相加。

$fluid-size = (($max-font-size - $min-font-size) / ($max-viewport-width - $min-viewport-width)) * 100;
$relative-size = ((max-viewport-width * ($fluid-size / 100)) - max-font-size) / $weighted-base-font-size;

使用我知道有效的示例，

$fluid-size

我期待：

~18.85

。

$relative-size

我期待：

5.32

：

$weighted-base-font-size: 15.427;
$max-viewport-width: 1920;
$min-viewport-width: 700;
$max-font-size: 280;
$min-font-size: 50;

((280 - 50) / (1920 - 700)) * 100 = 18.85
((1920 * (18.85 / 100)) - 280) / 15.427 = 5.31

另一个，

$fluid-size

我期待着：

~4.92

。

$relative-size

我期待：

0.36

：

$weighted-base-font-size: 15.427;
$max-viewport-width: 1920;
$min-viewport-width: 700;
$max-font-size: 100;
$min-font-size: 40;

((100 - 40) / (1920 - 700)) * 100 = 4.91
((1920 * (4.91 / 100)) - 100) / 15.427 = -0.37;