移动端font-size适配

屏幕宽度

机制是：对于不同宽度的屏幕，我们用js取到屏幕的宽度，然后根据这个宽度同比缩放font-size，由于我们的css是用rem写的，所以页面内容也会同比缩放，达到我们想要的效果。下面具体来讲实施方案。
首先给html设置viewport：

对于手机端，我们希望以iphone6作为参照，在其它屏幕上同比放大或缩小。
(1)以iphone6作为参照，iphone6的宽度是375px，dpr为2，所以对于上面显示的375px的图，我们需要的图片大小是750px，所以我们拿到的psd设计图的宽度必须是750px。为了方便书写rem，我们希望psd设计图上750px对应的rem是7.5rem。而设计图上面750px在iphone6上面的实际大小是375px，所以我们需要设置iphone6的font-size=375/7.5px=50px。更一般地，由于移动端的font-size的默认值是16px，所以我们更倾向于用一个百分比来设置font-size：font-size=50/16=312.5%。(注意：用px和百分比没有本质上的不同。)

(2)在其它屏幕上进行缩放，为了解决这个问题，我们用js来读取屏幕的宽度，然后利用这个宽度来进行缩放，代码如下：

var initScreen=function(){
    $("html").css("font-size", document.documentElement.clientWidth / 375 * 312.5 + "%");
}

最后，我们需要解决横屏问题和用户手动缩放问题，他们本质上都是改变屏幕宽度的问题，所以我们监听resize事件或者onorientationchange事件，当发生的时候，重新调用initScreen方法。代码如下：

$(window).on('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
    setTimeout(initScreen, 200);
});

注意：上面的代码并不是原生js，要引入zepto库！也可以用原生js实现，不过要考虑兼容性问题，我就不贴出代码了。

另外，为了增加代码的健壮性，在js加载不成功的时候也能进行适配，建议在css加上媒体查询：

html{ font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html{ font-size:400%;}
}
@media screen and (min-width:640px) and (orientation:portrait){
    html{ font-size:533.33%;}
}

注意：我这种适配方案中，1rem的实际大小是50px，而不是100px。所以0.12rem的字体，在设计稿上面是12px，但是在手机上的实际大小是6px！