使用 calc 和 vw 在 2 种字体大小之间进行线性缩放

Question

是否可以使用calc()和vw单位的某种组合在两种不同的字体大小之间线性缩放？

示例：我给出的网页设计具有以下字体大小：

<h1>字体大小：18px @ 360px

<h1>字体大小：32px @ 1024px

如果我希望font-size使用单位随着浏览器宽度放大vw，数学非常简单（SCSS 语法）：

font-size: 18/360*100vw;=font-size: 5vw;

因此，基于 18px @ 360px 的字体大小，您将使用5vw. 然而，当浏览器达到 1024px 时：

1024*0.05 = 51.2px这就是 1024px 的大小<h1>，远远高于设计值32px。如果我将 font-size 设置为使用 32px 作为基础，则会出现相反的问题：font-size: 32/1024*100vw;= font-size: 3.125vw。现在字体会太小@360px；

那么问题又来了，是否可以font-size在 2 个不同断点处的 2 个字体大小之间线性缩放 a？是否可以使用某种组合或vw单元calc来实现这一目标。我试图计算出这样的方程，但我不确定这是否可能。

我一直在考虑尝试类似的事情：

font-size: calc(18/360*100vw * 1.01vw);或类似的东西，但显然这种类型的语法对于calc().

注意：我并不是在寻找简单的媒体查询解决方案，我只是增加字体大小@1024px。我正在寻找一种在所有分辨率之间平滑线性缩放的方法。

Answer 1

一个近似的解决方案（我没有考虑分数）将是

font-size: calc(2vw + 12px);

您需要求解 2 个点的方程组，并找到结果的方程

第一个方程是，对于 360 视口，字体大小为 18。因此，

a * 3.6 + b = 18

其中 a 是 vw 单位的部分，b 是 px 部分

第二个方程是

a * 10.24 + b = 32

让我们进入webmath并输入

给出的结果是

所以你的确切答案是

font-size: calc (2.11vw + 10.41px);