基于窗口大小的字体大小的完美公式?

时间:2018-03-05 08:22:03

标签: css font-size calc

最近我发现了这个网站:https://varagon.com/

他们正在使用一些有趣的计算公式来计算基于窗口大小的字体大小。公式如下:

font-size: calc(22px + 54 * ((53vw + 53vh) - 600px) / 820);

对于屏幕尺寸1920x1126 px,计算出的字体大小值为88.8006px。 你能解释一下公式中的每个值是什么吗?

编辑:

也许我没有正确表达我的问题 - 我知道VH和VW是什么,我的问题是关于整个计算公式。 IE浏览器。为什么他们将22px加到高度和宽度的一半之和等等:) 我试图对它进行逆向工程/数学计算,但现在还没有成功。

2 个答案:

答案 0 :(得分:0)

在网站中,他们使用了视口长度。 阅读此click here

值为:

  • vw(初始包含块宽度的1%)

  • vh(初始包含块高度的1%)

  • vi(根元素内联轴方向视口大小的1%)

  • vb(根元素块轴方向视口大小的1%)

  • vmin(较小的vw或vh)

  • vmax(较大或vw或vh)

  

如果我们采用vw,如果视口的宽度是200mm,则字体大小   h1元素的数量为16毫米(即(8×200毫米)/ 100)。

     

h1 {font-size:8vw}

由此可以看出,当视口宽度增加时,字体大小会增加。

网站的字体大小是根据上述概念计算出来的。

答案 1 :(得分:0)

我找到了可能的答案 - 这个公式是某种' vmax' polyfill(缺少IE11对此值的支持)。

我找到的Polyfill看起来非常相似我询问的公式: https://gist.github.com/uto-usui/ea9836aa92d334e7694fb31d8e93a4f4