如何使字体大小自动调整为移动版本

Question

我正在使用Twitter Bootstrap创建一个网站;现在该网站在台式机或笔记本电脑上看起来不错，但是当我在移动设备上查看时，字体大小无法调整到合适尺寸的屏幕。有人能告诉我如何解决这个问题吗？

<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>

Answer 1

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%; }
}

试试这个:) 的 http://jsfiddle.net/yv5eu/

Answer 2

当然，您可以使用Nick建议的媒体查询。但是一个更流畅的选择是使用Javascript来完成技巧，因为Tushar已经解决了。如果您不熟悉JavaScript编码，FlowType.js是一个轻量级的jQuery插件，易于使用，适用于响应式字体。