javascript - 如何调整字体大小和重排文本以适应带有 html 标签的父 div 的宽度和高度

Question

所以我有这个有效的例子:http://jsfiddle.net/MYSVL/1064/

但我不希望它也适用于 html 标签。例如，在 fiddle 中，我们的文本被包裹在一个 div 中。

<div id="fitin">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

但我希望这个示例也适用于 html 标签:

<div id="fitin">
<div><h1>Lorem</h1> <p>ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

有人知道怎么做吗？

Answer 1

你应该使用 viewport percentage units根据容器的大小改变大小:

vh
1/100th of the height of the viewport.
vw
1/100th of the width of the viewport.
vmin
1/100th of the minimum value between the height and the width of the viewport.
vmax
1/100th of the maximum value between the height and the width of the viewport.

这样，您就不会让 javascript 处理视觉问题(设置 onresize 事件很繁重)，您可以在任何元素中使用。

参见:http://jsfiddle.net/MYSVL/1064/