resize font-size according to div size

如果我要满足以下的需求，怎么实现呢？

• 字体大小随着父容器div的宽度变化而变化，即 width = font size * 1.8
• 最小font size是20px
• 最大font size是32px

调研总结以下的方法可以改变font-size

1. 使用CSS单位 vw | vh， 但是 vw | vh Viewport is the browser window size.
   1vw = 1% of viewport width. 这里针对浏览器窗口的大小来调整字体大小，并不是根据父容器div。
2. 使用@media all | screen | print and (min-width: 50px) 枚举的方式，设置font size大小，并不是根据父容器，这种通常适用于不同设备设置不同的字体大小，如平板、电脑、手机。打印机等。
3. 使用百分比，如 span { ffont-size: 80%; } 设置百分比是沿着父级一级一级往上查找，直到找到设置font-size的一级， 然后用该font-size * 0.8 作为当前span的font-size

以上三种都没有实现我们的需求，但是却可以根据不同viewport 设置不同字体的大小

4. 使用svg， 如：

<div class="div">
	<svg width=”100%” height=”100%” viewBox=”0 0 300 30” style>
		<text x=”0” y=”25”>test</text>
	</svg>
</div>

.div {
	width: 100%;
}
.div>svg {
	max-width: 150px;
	max-width: 2000px;
}

5. 使用js控制,以angular为例

const width = parentDiv.offsetWidth;
const length = str.length;
let fontSize = Math.floor(width / length * 1.8);
fontSize = fontSize > 52 ? 52 : fontSize;
fontSize = fontSize < 20 ? 20 : fontSize;
this.fontSize = fontSize;

6. 使用第三方工具，如FitText http://fittextjs.com/

哪种实现方式是最优的，还有没有其他的实现方式，这些都需要进一步的调研，期待大家的答复呦！