rem布局，移动H5页面布局规范（1）。

功能决定成度，样式决定美感度，在移动H5页面布局上规范必然时不可少。
在H5页面 UI设计图的基础，如何根据设计图片写出比例相同， 在不同移动设备上页面上的样式依然保持一致。响应式页面，rem布局的使用方法。
1、设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

2、重点在于设置页面根元素的字体大小，rem单位是根据页面根元素进去相对比例的计算。注意750 为设计图片的宽度！由于手机在横竖屏方向，document.documentElement.clientWidth 会不一样，在实例代码中进行有效处理。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +‘px’;

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
	window.addEventListener(evt, resize, false);

		function resize(fals) {
			//设置标准屏幕可见宽度的（Iphone6+）
			var k = 375;
			if(window.orientation == 0 || window.orientation == 180) {
				//竖屏
			} else {
				//横屏
				k = 320;
			}
			
			if(document.documentElement.clientWidth <= k) {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +'px';
			}else {
				//这里如果屏幕可见宽度大于 标准屏幕宽度，设置标准函数宽度为375px OR 320px.
				document.documentElement.style.fontSize = k / 750 * 100 +'px';
		}
}
resize(true);

真正实现的处理逻辑体现第二步骤，可直接应用于项目中。然后在设置字体大小、图片高度宽度的基础上使用rem 单位实现基本的H5页面样式响应。
字体根据H5设计图提供的字体大小 除以 100 得到rem 单位的换算。20px – 0.2rem 。100px – 1rem。

原附件Demo,使用上希望能帮助到。
http://download.csdn.net/download/china_guanq/9976833

QQ群：595377655。问题总是能出现并着手解决的地方，欢迎加入。