关于移动端自适应以及字体单位的使用
这段时间一直有一些小伙伴断断续续的问到关于移动端字体设置以及自适应的问题，其实关于大家口中说的自适应，我觉得有两种，一种是字体自适应（字体随着分辨率的变化而变化）和图片自适应，另一种仅仅是图片自适应，字体大小不变；
现在我把我做移动端这块的经验给大家分享一下，大家觉得适合的就用，不适合的看看就好了，谢谢；
方法一
第一种方法是我在腾讯外包的时候公司要求的做法，这个方法很简单，记住一个词，“减半思想”，其余的做法几乎和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
总之：每一种方法有每一种方法的优势和劣势，都要结合自己的项目来使用，写来写去其实都差不多，就是个字体问题，我们不要想复杂了就好了，好了，以上就是我在做移动端自适应和字体设置的经验了，谢谢，不喜勿喷。
