移动端布局方法比较

缩放布局

根据 zoom 和 transform 的 scale 两种方式进行缩放。在这两者之间，zoom 缩放之后容器所占据的空间会跟着一起缩放，而scale 之后，容器所占据的空间不会变；并且 zoom 缩放之后渲染的清晰度比 scale 好。

(function(realWidth, id){
	var elm = document.getElementById(id);
	function setZoom() {
		var cliWidth = document.doucmentElement.clientWidth || document.body.clientWidth;
		elm.style.zoom =  cliWidth / realWidth;
	};

	window.addEventListener('resize', setZoom, false);
	setZoom();
})(640,'box'); // 根据640设计稿适配

此种方法优点是能根据设备窗口自动缩放页面，缺点是高度和宽度都会被等比缩放，所以不适合有滑屏操作的页面

百分比布局

百分比布局算比较简单的适配布局，并且能够很好的解决设备尺寸碎片化严重的情况，兼容性也很好。在百分比布局中熟练使用 margin 和 padding 能让工作事半功倍。

要灵活使用百分比布局，首先有个很关键的问题需要我们弄明白：百分比都是以什么为基础的百分比。有人说是父元素，但是这个回答太笼统了，接下来详细说明一下：

width/height : 父元素
margin/padding :  任意方向的百分比都参照的是父元素的宽度，因为css规范默认是横向排版，通常宽度较为固定，如果想参照高度，可以通过对父元素 -webkit-writing-mode:vertical-lr; 改变排版方向。
font-size : 父元素的font-size,可以继承得到。
line-height : 元素自身的font-size
vertical-align : 参照元素自身的line-height.
top/bottom : 参照父元素的高度
left/right : 参照父元素的宽度
border-radius : 参照自身元素尺寸。eg:元素width:200px,height:100px; border-radius:40% = 80px/40px;
background-position : 初始值为0% 0%；参照背景图片定位区域的大小减去背景图片的大小
transform: translate : 参照自身元素的高宽

请注意：当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。 例如，一个元素的font-size 是 14px，并定义了 line-height:150%;，那么该元素的下一级子元素继承到的 line-height 就是21px，而不会再和子元素自己的 font-size 有关。

此方法适合页面内容结构均匀分配,固定高度,结构不是很复杂。并且注意此时的meta标签

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

rem布局

rem 是 css3 中的一种尺寸单位。具体计算方法是根据 节点的 font－size 值决定的。比如此节点的 font－size 是 14px；那么 1rem 就表示 14px；

正是利用此原理，来达到通过修改跟节点的 font－size 值而一发而动全身的修改了页面 dom 尺寸来适配各种尺寸的页面。

与 em 类似，都是浏览器最后将他们转换为固定的 px 值，但是他们的区别就在于是根据谁来转化为 px。rem 只认 html 节点，而 em 是相对于父元素的 font－size 而决定的，也正是因此很容易被继承的 font－size 所影响。

通常在适配页面中，会以一个固定尺寸比如 640 像素的页面书写，然后通过修改 html 节点的 font-size 值来修改 1rem 所代表的实际 px 值。

(function(){
	if(!window.addEventListener) return;
	var html = document.doucmentElement;
	function setFont() {
		var width = window.innerWidth;
		html.style.fontSize = 100 * (windth/640) + 'px';
	}
})();

此方法适用范围比较广泛，在移动端浏览器上使用优先。