html - 如何让字体大小自动适应手机版

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/