如何使用html标签调整字体大小和重排文本以适合父div的宽度和高度

Question

因此，我有一个正在运行的示例： http : //jsfiddle.net/MYSVL/1064/

但是我也不想与html标签一起使用。 例如，在小提琴中，我们的文本包装在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

您应该使用视口百分比单位 ， 视口百分比单位会根据容器的大小而变化：

VH
视口高度的1/100。
VW
视口宽度的1/100。
VMIN
视口的高度和宽度之间最小值的1/100。
VMAX
视口的高度和宽度之间最大值的1/100。

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

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