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/

如何根据宽度尺寸重新缩放文本大小？

2 个答案: