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

Question

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

示例：我正在使用以下字体大小进行网页设计：

<h1>是font-size：18px @ 360px

<h1>是font-size：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。如果我将font-size设置为使用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检查＆＃34;已知问题＆＃34;标签

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