同时应用 vh / vw 或百分比来控制文本的高度和宽度

Question

有没有办法控制文本的纵横比，使其在 HTML 元素中始终保持相同的相对大小并保持相同的纵横比，无论其容器的大小如何？

有没有一种方法可以使用vw 或vh 控制文本的高度和宽度？我尝试了百分比，但它似乎不起作用，因为它似乎只是将基本字体大小增加了该百分比。

我希望保持文本相对于其容器的纵横比相同，无论该框被拉伸多少等。

它需要是动态的，但如果我使用 vw 为例，并降低高度，文本最终会超出其容器的高度，我需要文本响应高度和宽度的变化，而不是其中一个。

所以我想问是否有一种方法可以使用vw 和vh 或百分比来控制文本的高度和宽度，或者有一种方法可以使用 JavaScript 来根据容器自动调整文本大小尺寸？

我检查了https://github.com/nbrunt/TextFit，但要从那里使用最佳拟合函数，容器显然必须具有“绝对”值，例如以像素为单位设置它们，而我的容器大小基于屏幕大小的百分比。

Answer 1

您可以尝试vmin（等于 vw 和 vh 中的较小者。）或vmax（等于 vw 和 vh 中的较大者）。

https://developer.mozilla.org/en-US/docs/Web/CSS/length

看看这个demo。