如何使字體大小自動適應手機版本

我正在使用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>

enter image description here

來源

2014-03-02 Xinrui Ma

你真的希望字號變小嗎？它可能很難在移動設備上閱讀。 –

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/

來源

2014-03-02 20:43:37 Nick