JS动态设置rem来实现移动端字体的自适应代码

在做移动端项目的过程中，移动端一般字体大小都使用rem，但rem的布局方式如何可以让其在任何移动端设备中自适应呢？

---

通过JS实现移动端字体的自适应:

此代码亲测有效：

!(function(win, doc){
	function setFontSize() {
		// 获取window 宽度
		var winWidth =  window.innerWidth;
		//640是表示设计图的尺寸大小,所以值具体根据设计图的大小.
		var size = (winWidth / 640) * 100;
		doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
	}
 
	var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
	
	var timer = null;
 
	win.addEventListener(evt, function () {
		clearTimeout(timer);
 
		timer = setTimeout(setFontSize, 300);
	}, false);
	
	win.addEventListener("pageshow", function(e) {
		if (e.persisted) {
			clearTimeout(timer);
			//此处给定时器来实现页面加载完毕之后在进行字体设置
			timer = setTimeout(setFontSize, 300);
		}
	}, false);
 
	// 初始化
	setFontSize();
 
}(window, document));

---

步骤：

1.当我们做移动端项目时，首先拿到的是设计师给的psd原型图，一般而言psd宽度就是这里的标记部分。psd设计稿宽度是多少就写多少。

2. 切图时，我们是以100px为基本单位的，每个元素的宽高，字体等等就直接用rem来写，不要执行减半操作，设计稿是多少就写多少。如图所示：

 此处的css样式：

.video {
    width: 6.4rem;
    height: 3.5rem;
}

因为我们在js代码中用了动态改变根字体的大小，所以.video会自动适应各种屏幕的。

3.移动端项目中头部加入常用的meta内容

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

// width viewport的宽度
// initial-scale 初始化缩放比例
// minimum-scale 最小缩放比例
// maxinum-scale 最大缩放比例
// user-scalable 用户是否可以缩放
// minimal-ui ios7 以上隐藏浏览器导航栏

4. css样式重置设置

为了解决我们由js动态设置html字体过大时，它的line-height对子孙元素的不良影响。所以给body设置一个默认的字体大小。

html {    
    line-height: initial;
}
body{    
    font-size: 0.32rem;
}

5. js代码动态改变根节点字体大小的js文件

如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为：(winWidth/640)*100.