html - 这个 CSS 代码如何/为什么在使我的文本响应时起作用？

Question

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

我有点理解该calc函数使我的字体动态调整大小，但是

1. 我不明白它是如何4rem + 1vw工作的（它到底在做什么）。
2. 我不明白如何calc相互作用或影响4rem + 1vw

标签： htmlcssfont-sizecalc

Answer 1

分解它：

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

1vw

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

4rem

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

所以，

calc(4rem + 1vw)

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

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