使用 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。但是，当浏览器达到 1024 像素时：

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

所以问题又来了，是否可以在 2 个不同断点的 2 个字体大小之间线性缩放 font-size？是否可以使用某种组合或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);

Answer 2

您为什么不尝试使用媒体查询进行缩放：

.text {
    font-size: 5vw;
}

@media screen and (min-width: 768px){
    .text {
        font-size: 3.125vw;
    }
}

@media screen and (min-width: 1024px){
    .text {
        font-size: 32px;
    }
}

http://caniuse.com/#feat=calc 检查“已知问题”选项卡。

你也可以尝试使用js，查看这个链接https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/