移动端使用rem，进行移动端自适应

(function(win){
	var docEl = win.document.documentElement;
	var timer = '';
	function changeRem(){
		var width = docEl.getBoundingClientRect().width;
		if (width > 540)//最大宽度，若果兼容到ipad的话把这个去掉就行
		{
			width = 540;
		}
		var fontS = width/10;//把设备宽度10等分 等同于用vw来做
		docEl.style.fontSize = fontS + "px";
	}
	//页面尺寸发生改变的时候就再执行changeRem
	win.addEventListener("resize",function(){
		clearTimeout(timer);
		timer = setTimeout(changeRem,30);
	},false);
	//页面加载的时候，若果是调用缓存的话就再执行changeRem
	win.addEventListener("pageshow",function(e){
		if (e.persisted)//缓存
		{
			clearTimeout(timer);
			timer = setTimeout(changeRem,30);
		}
	},false);
	changeRem();
})(window)

/*移动端添加的meta属性*/
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">

注意：根据设计人员给的图片尺寸，高度进行相应的修改，如640*1334的图，底部高度为98px;  按照320*667  CSS要设底部的高度为32/49=0.653rem

       因为是新手刚接触rem，就按照自己的理解来了，使用rem元素计算高度，计算不正确的话，请指正出来，谢啦！