如何根据宽度大小重新调整文本大小？

Question

我在 http://danceforovariancancer.com.au 网站上有一个标题，其中包含有关我的页面的一些信息

标题html是

<div class="container-fluid myheader text-center">
    <div class="headeroc">
        Ovarian Cancer
    </div>
    <div class="headerdance">
        Dance-o-thon
    </div>
    <div>
        <a href="https://ovariancancer.secure.force.com/eventTicket?e=70116000000ob0m" target="_blank" class="btn btn-lg btn-reg uppercase btnmarg">Register</a><a href="https://ovariancancer.secure.force.com/CICD__SignUp?id=70116000000oakU" target="_blank" class="btn btn-spons btn-lg uppercase">get sponsors</a>
    </div>
    <div class="headerdate">
        <span class="glyphicon glyphicon-calendar"></span>May 14th <span class="mybold">2016</span>
    </div>
    <div class="kingston">
        <span class="mybold">3</span><time>pm</time> - <span class="mybold">11</span><time>pm</time>
at the <a target="_blank" href="https://www.google.com.au/maps/place/Kingston+City+Hall/@-37.9305426,145.0266516,14.25z/data=!4m2!3m1!1s0x6ad66eb237f62e3f:0xc9e49003d9d323c1!6m1!1e1" class="mybold">Kingston City Hall</a>
    </div>
    <div class="kingstonmap" id="kingstonmap">
    </div>

</div>

并且只使用一些文本样式类来设置大小和粗体，然后也使用一些填充。我意识到当我重新调整网站的宽度时，文本只是移动到下一行，看起来很丑陋。 Here is a demo of a nicely resizing header with text

他们是否使用媒体查询或其他东西，因为它几乎在每个宽度步长处都会重新调整大小，因此看起来不像媒体查询，是否有一种实现的方法可以在类的引导程序中执行此操作？这些是否会重新调整所有文本的大小，可以说是相对于彼此的字体大小，所以看起来都一样。干杯:)

谢谢

Answer 1

用 vw 代替 em

这里是另一个有类似问题的堆栈溢出页面的链接。

Font scaling based on width of container

我认为 8 或 9 vw 将使它达到您想要的大小。

干杯

Answer 2

JavaScript 是一种顺利完成它的方法（或者我猜是每个像素的媒体查询，但这很荒谬）。我不打算在这里写插件，但基本上你会做一个窗口调整大小事件并检查元素的高度是否发生变化。如果是这样，那就意味着它断线了，所以你会改变字体大小。在更改字体大小时，您还需要考虑行高。

对于更快的解决方案，我一直很喜欢 FitText 插件：

http://fittextjs.com/