如何解决此CSS代码如何/为什么能使我的文本响应？
有问题的CSS：
font-size: calc(4rem + 1vw);
- 我不了解
4rem + 1vw的工作原理（它到底在做什么）。 - 我不了解
calc如何相互作用或影响4rem + 1vw
解决方法
分解：
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值，则它可以在浏览器上提供更统一的渲染。 （有关更多信息，请参见reset.css）
所以在这里，只要不更改html字体大小，4rem = 64px。
关于vw，它的工作原理与我们在rem中描述的非常相似，但是它不是基于任何位置的固定字体大小，而是基于您的窗口。这使得它基于完全可变的数据。您可以看到这样的变量：对于1000px的窗口，1px = 0.1vw。所以1vw是您的窗口宽度的1％。
所以在这里，如果您的窗口宽度为1000px，则1vw = 10px。
计算实际上是将它们相加：64px + 10px。
最后，在您的代码中，您将拥有一个固定的4rem，只要html字体大小保持不变，该值将始终具有相同的值，并且变量1vw的增加将取决于您的浏览器宽度。
编辑：
最后一条信息是，因为可能不清楚：您不需要calc或4rem来使字体大小“响应”。尝试使用font-size: 1vw，它也会响应。您的计算结果只会使基于设备宽度的变化量占最终字体大小的一小部分。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
