`font-size` 与所有视口单位

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

我们已经多次介绍过流体类型。 此页面 可能提供了最详细的介绍。 它比简单地使用 vw 单位设置 font-size 更复杂,因为那样会太过于戏剧化。 理想情况下,font-size 应该在最小值最大值之间真正地流动。

总有一天会推出 min-font-sizemax-font-size(可能吧),但在那之前,我们实现流体类型的方案可能需要借助一些 @media 查询来锁定这些最小值/最大值。

或者…

大约一年前,Matt Smith 记录了一种我以前没见过的技术。 它使用一点 vw、一点 vh 以及两者中较小的那个来计算字体大小…

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

当然,这取决于字体和你对它的使用方式,但在我看来,它可以平缓曲线,让你可能根本不需要最小值和最大值。

直接链接 →