H5的适配

1.rem适配

<script type = "text/javascript">
	//rem适配优化
	//rem适配原理：改变了一个元素再不用色呗上占据的css像素的个数。
	//rem适配优缺点：优点：没有破坏完美视口；缺点：px值到rem的转换太复杂
	(function(){
		var styleNode = document.createElement("style");
		var w = document.documentElement.clientWidth/16;
		styleNode.innerHTML = "html{font-size:"+w+"px!important}";
		document.head.appendChild(styleNode);
	})()
</script>

2.viewport适配（目的：改进rem适配的缺点）

<script type = "text/javascript">
	//viewport
	//viewport适配原理：viewport适配方案中，每一个元素再不同色呗上占据的css像素的个数是一样。但是css像素和物理像素的比例是不一样的，等比的。
	//viewport适配优缺点：优点：所量即所得；缺点：没有使用完美视口
	window.onload = function(){
		(function(){
			var targetW= 640;
			var scale= document.documentElement.clientWidth/targetW;
			var meta = document.querySelector("meta[name='viewport']");
			meta.content="initial-scale="+scale+",minimun-scale="+scale+",maximum-scale="+scale+",user-scaleble=no";
		})()
	}
</script>