用于不同视口的CSS响应字体大小说明

Question

我阅读了此article。本文结尾处，font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40);将在任何视口中工作。对于不同的视口，我们可以将此calc方法用于响应字体大小。我同意这行得通。但是，我不知道它们从哪个值中得到0.875em，0.25，80em和40。任何人都可以解释从哪个数字中获得这些值吗？

html {
  font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40);
}

Answer 1

如果忽略所有单位，则此数学方程式的结果将为1。

现在em是可缩放单位。例如，如果您的h1是36pt，则1em将是36pt，而2em将是72pt。

这里的窍门是100vw，它等于视口宽度，它可以调整窗口大小。

因此，您将根据浏览器窗口的宽度缩放字体大小，而无需使用媒体查询。