Html 如何使字体大小自动调整到手机版本

我正在使用Twitter引导创建一个网站；该网站现在在台式机或笔记本电脑上看起来还不错，但当我在手机上查看时，字体大小并没有调整到屏幕合适的大小。有人能告诉我怎么修吗

<section class="box">
   <img src="images/background2.jpg" class="img-responsive" alt="">
   <div class="carousel-caption">
        <h1>Do you love to scuba dive? Are you looking for your next bid dive event?     
        </h1>
        <p>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
        multiple dives operated by experienced dive companies. All proceeds from these diving excursions will benefit the ABI Endowment Fund
        <a href="http://endowment.abi.org" target="_blank"> [endowment.abi.org]</a> 
        Do something you love while supporting the ABI Endowment Fund. Get more information about ABI's upcoming dive excursions.
       </p>
   </div>
</section>

你喜欢潜水吗？你在寻找下一个投标跳水项目吗？
别再看了。加入ABI和其他经验丰富的潜水员，我们将前往令人惊叹的海洋度假胜地，体验最先进的潜水体验。每次旅行将包括
由经验丰富的潜水公司进行多次潜水。这些潜水远足的所有收益将受益于ABI捐赠基金
在支持ABI捐赠基金的同时做一些你喜欢的事情。获取更多有关ABI即将进行的潜水远足的信息。

试试这个：）

---

当然，你可以按照尼克的建议使用媒体查询。但另一个更流畅的选择是使用Javascript来完成Tushar已经解决的问题。如果您不习惯使用JavaScript编码，FlowType.js是一个轻量级的jQuery插件，它简单易用，适用于响应性字体

您真的希望字体大小更小吗？在移动设备上阅读可能会变得困难。

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}