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

Question

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

示例:我正在设计一个具有以下字体大小的网页:

<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 <h1> 有多大将是 1024px，远高于设计的 32px .如果我将字体大小设置为使用 32px 作为基础，则会出现相反的问题:font-size: 32/1024*100vw; = font-size: 3.125vw .现在字体会太小@360px；

所以问题又来了，是否可以线性缩放 font-size在 2 个不同断点处的 2 个字体大小之间？是否可以使用某种组合或 vw单位和 calc为达到这个。我试图计算出这样的方程式，但不确定是否可行。

我一直在考虑尝试这样的事情:

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

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

Answer 1

一个近似的解决方案(我没有考虑分数)是

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

你需要解这2个点的方程组，并求出结果的方程

第一个等式是，对于 360 度视口(viewport)，字体大小为 18。因此，

a * 3.6 + b = 18

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

第二个等式是

a * 10.24 + b = 32

让我们转到webmath并输入

给出的结果是

所以你的确切答案是

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