细分一下:

font-size: calc(4rem + 1vw);

1vw

vw是“等于视口初始包含块宽度的1%”。浏览器可以将其计算为一个像素值。

4rem

rem相对于HTML元素的字体大小。浏览器可以将其计算为一个像素值。

所以，

calc(4rem + 1vw)

calc将这些值相加，并将font-size属性设置为该值。

现在，我在这里说的是“像素值”，但它可能是某个中间值，与像素本身无关，但想法是一样的。

首先，rem和vw的工作方式是一样的，但不是使用相同的引用。您必须将rem和vw看作是其他度量。

rem基于您的根html字体大小。这意味着只要html的字体大小为16px，1rem就等于16px。如果在任何时候更改了html字体大小，css的所有rem指标都将适应。当开发人员没有直接设置默认css值时，它允许在具有不同默认css值的浏览器上进行更统一的呈现。（有关更多信息，请参见reset.css）

所以在这里，只要你不改变你的html字体大小，4rem=64px。

现在关于大众，它的工作方式很像我们描述的rem，但它不是基于任何地方的固定字体大小，而是基于你的窗口。这使得它基于一个完全可变的数据。您可以看到这样的变量:对于1000px窗口，1px=0.1 vw。所以1vw是窗口宽度的1%。

这里，如果窗口为1000px，1vw=10px。

calc实际上只是将它们相加:64px+10px。最后，使用您的代码，您将拥有一个固定的4rem，只要html字体大小保持不变，它将始终具有相同的值，以及一个变量1vw，它将取决于您的浏览器宽度。

编辑:

最后一个信息，因为可能还不清楚:您不需要calc或4rem来使您的字体大小“响应”。尝试使用font-size:1vw，它也会响应。你的calc只会使你的最终字体大小的较小部分的变化。