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

时间:2014-11-26 21:13:42

标签: javascript jquery html css

所以我有一个正常工作的例子: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>

有谁知道如何使这项工作?

1 个答案:

答案 0 :(得分:1)

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

  

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

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

请参阅:http://jsfiddle.net/MYSVL/1064/