h5适配的解决方案【1】

前言

1. 此h5的适配方案是以宽度为750的UI图为基准（只要懂这行的设计都知道移动端设计图宽为750，否则可能就是外行，我是遇到过~）
2. 样式的单位需要自己计算转换成rem（转换很简单，就是设计图上量取的数值除以100）

核心代码

• 支持根据窗口大小变化而变化
• 以750px的设计图为标准（即iphone6的尺寸为标准）

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

使用方法

• 核心代码尽量靠前放置，保证最早渲染出来的就是转换后的效果
• 单位用rem，自行根据设计图进行换算
• 话不多说，直接贴代码：

	
		
		
		
		
	
	
		
我的标题