手机端自适应之js处理

　　在手机端处理自适应时，一般有两种方法：css和js的方法，css的方法在上一篇文章中已经介绍过，这次主要介绍一下js的方法。

 

　　自适应的本质就是给html的font-size设置一个基准值，然后根据不同手机屏幕的宽高比不同来设置响应的font-size的基准值。那css的方法就是利用media设置不同手机状态下的基准值，但是现在的手机种类越来越多，那么用media分档时分类就会越来越多，且设置font-size的也容易出现断层的情况。但是，用js的方法就不同了，js可以实时获取手机屏幕的宽度，再计算响应的font-size的大小。

 

　　原理是：由于现在的UI设计稿一般以iPhone6的尺寸来设计，所以我们默认在iPhone6时html的font-size为20px，需要计算的font-size大小我们设定为y,js获取的屏幕宽度为clientWidth,根据数学运算方法: 

　　 y/20 = clientWidth / 375，即font-size = 20 * (clientWidth / 375) + 'px'

 

具体代码如下： 

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 

最后，在css中我们一般用rem作为单位，那么在写css样式的时候，就可以直接写成: font-size: 5rem;