javascript - 如何根据容器大小设置字体大小？

Question

<分区>

Answer 1

如果要将字体大小设置为视口(viewport)宽度的百分比，请使用vw单位:

#mydiv { font-size: 5vw; }

另一种选择是使用嵌入在 HTML 中的 SVG。它只是几行。文本元素的 font-size 属性将被解释为“用户单位”，例如根据视口(viewport)定义的单位。因此，如果您将视口(viewport)定义为 0 0 100 100，则字体大小为 1 将是 svg 元素大小的百分之一。

不，没有办法在 CSS 中使用计算来做到这一点。问题是用于字体大小的百分比，包括计算中的百分比，是根据继承的字体大小而不是容器的大小来解释的。为此，CSS 可以使用一个名为 bw(box-width)的单位，所以你可以说 div { font-size: 5bw; }，但我从未听说过这个提议。