Html5移动端页面 适应布局 (rem布局)

rem的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号·

;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
		var rem = width * 100 / designWidth;
		//兼容UC开始
		rootStyle="html{font-size:"+rem+'px !important}';
		rootItem = document.getElementById('rootsize') || document.createElement("style");
		if(!document.getElementById('rootsize')){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id='rootsize';
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//兼容UC结束
		docEl.style.fontSize = rem + "px";
	};
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);

使用媒体查询

说到底，上面的js代码不就是根据不同的设备调整对应的html字号嘛，那么我们根据实际的设备，来加上相应的字号不就行了吗？我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

html {
font-size: 62.5%
}

@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}

@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}

@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}

body {
max-width: 640px
}
}

使用示例（转载自下）

https://www.cnblogs.com/tiger95/p/6628419.html