字体大小基于视口宽度和高度

Question

我会保持简短和直截了当，所以我明白：

• VW 根据视口宽度更改字体大小。

• VH 根据视口高度更改字体大小。

我的问题是；

有没有办法根据视口宽度和高度来缩放我的字体大小？ 因此，更改浏览器的高度和宽度会适当地缩放我的字体大小。

我问是因为我想将我的文本大小适当地缩放到它们所在的容器，我的问题是容器缩放到 100% 宽度和 100% 高度。 因此，基于高度和宽度缩放文本大小似乎是合乎逻辑的，除非有办法根据其父容器的尺寸来调整大小？

---

任何帮助或建议表示赞赏，在此先感谢您

我尝试使用百分比并查看了各种字体大小语法，但我似乎找不到任何基于宽度和高度缩放的东西，这是有原因的吗？

Answer 1

看看vmin和vmax 。

• 1vmin = 1vw或1vh ，以较小者为准
• 1vmax = 1vw或1vh ，以较大者为准

Answer 2

还有另一种解决方案，但需要进行一些计算。 我必须将文本放置在一些预先设计的空间中，它的视口大小是 300 * 200 像素。 它可以调整大小以适应另一个容器。 字体大小选择为 18px。

因此，为了将字体大小转换为相对于视口的大小：

[font size]*100/[viewport size]

18*100/300 = 6vw
18*100/200 = 9vh

现在只需使用每种尺寸的一半：

font-size: calc(3vw+4.5vh);

而已。