使用 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;

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

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

font-size: calc(18/360*100vw * 1.01vw); 或类似的东西，但显然 calc().

无法访问这种类型的语法

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

Answer 1

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

.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 检查 "Known issues" 选项卡。

你也可以试试用js，看看这个linkhttps://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Answer 2

近似解（我没有考虑分数）是

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);

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

Linear scaling between 2 font sizes using calc and vw

css

math

calc

viewport-units