這段時間一直有一些小伙伴斷斷續續的問到關於移動端字體設置以及自適應的問題，其實關於大家口中說的自適應，我覺得有兩種，一種是字體自適應（字體隨着分辨率的變化而變化）和圖片自適應，另一種僅僅是圖片自適應，字體大小不變；
現在我把我做移動端這塊的經驗給大家分享一下，大家覺得適合的就用，不適合的看看就好了，謝謝；
方法一
第一種方法是我在騰訊外包的時候公司要求的做法，這個方法很簡單，記住一個詞，“減半思想”，其余的做法幾乎和pc端差不多，最終也能實現我們想要的效果；
1.設計師提供的頁面設計稿大小一般都是640px；
2.頁面可視區域均以320px，並居中布局，切圖的時候按照640寬度的設計稿，將各元素減半重構,特殊要求和自適應布局除外
3.不需要設置默認字體，終端瀏覽器會自動將字體設置為終端上的字體
4.為頁面設置viewPort；
具體如下：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gbk">
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>專題名-XXX官網-騰訊游戲</title>
<!-- 設計：cp | 重構：cp | 創建：| 團隊博客：http://tgideas.qq.com/ -->
</head>
<body>
<div id="wrap"></div>
<div class="foot">
<script type="text/javascript" src="http://ossweb-img.qq.com/images/js/mfoot.js"></script>
</div>
</body>
<script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
<script type="text/javascript">
if(typeof(pgvMain) == 'function')pgvMain();
if(navigator.appVersion.indexOf('Android') != -1){
document.addEventListener("DOMContentLoaded",function(e){
document.getElementById('wrap').style.zoom = e.target.activeElement.clientWidth/320;
});
};
</script>
</html>
css
使用2倍圖來展現頁面效果。假設切出來的banner寬高為：640x200。背景圖可利用background-size來調整圖片，img標簽的圖片可將其width和height減半。參考代碼：
<div style="background-img:url(images/banner_2x.jpg);background-size:320px 100px;"></div> <img width=320 height=100 src="images/banner_2x.jpg"/>
簡單demo供參考：http://tgideas.qq.com/cguide/demo/mobile/index.htm
總結：這種方法字體使用的是px，這是騰訊內部要求做法，我們沒必要一一模仿，不太推薦使用；
方法二：
將html的字體設為62.5%，首先你得知道這是什么意思，1，瀏覽器的默認字體是16px，縮小為62.5%，就是16*62.5%=10px；10px=1rem；設為10px這個數字也是為了方便我們計算，例如，設計稿上是20px，我們通過這個單位換算就是2rem；當然，用這種方法的時候我也遇到過個別字體怪異的問題，比如設計師給我的字體在psd上看起來正常，但是實際做出來字體會偏小或者偏大，這種情況的話，我們可以稍微微調一下字體；
demo參考地址：http://pan.baidu.com/s/1bp1ej87
方法三：
js結合rem控制字體隨着分辨率變化而變化，不過這個也要按照需求來，有些字體不需要隨着分辨率變化而變化的，我們就可以不需要使用這個js，那推薦使用方法二；
具體代碼如下：
function fontSize(){
var deviceWidth = $(document).width();
if(deviceWidth > 640){
deviceWidth = 640;
console.log(deviceWidth);
}
var fontSize = deviceWidth / 6.4;
$("html").css("fontSize",fontSize);
console.log(fontSize)
}
fontSize();
$(window).resize(function(){
fontSize();
});
加入這個js以后，假設設計稿的字體是20px，我們在css中設置為0.2rem；當然這種方法有時也有點缺陷，就拿我上次遇到的問題來說，產品經理說用這種方法字體在6p下太大，這時候我們可以對6p下面的字體進行微調，使用以下的代碼：
@media only screen and (min-width: 414px) and (max-width: 414px) {
html {
font-size: 55px !important;
}
}
55px是我隨便給的一個值，當然這個媒體查詢可以根據大家項目中的實際情況來修改；
demo參考地址：http://pan.baidu.com/s/1mi4jDcG
總之：每一種方法有每一種方法的優勢和劣勢，都要結合自己的項目來使用，寫來寫去其實都差不多，就是個字體問題，我們不要想復雜了就好了，好了，以上就是我在做移動端自適應和字體設置的經驗了，謝謝，不喜勿噴。