移动端适配问题

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

一、移动端适配的几种方法

（1）百分比布局

（2）flex布局弹性布局

（3）rem布局（什么是rem）

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

// width    设置viewport宽度，为一个正整数，或字符串‘device-width’
// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放

rem布局常用代码

	<script type="text/javascript">
		/*
		 	如果页面的宽度超过了640px，
		 	那么页面中html的font-size恒为100px，
		 	否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)
		*/	
	    (function (doc, win) {
	      	var docEl = doc.documentElement,
	        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	          recalc = function () {
	              var clientWidth = docEl.clientWidth;
	              if (!clientWidth) return;
	              if(clientWidth>=640){
	                  docEl.style.fontSize = "100px";
	              }else{
	                  docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	             }
	         };
	 
	        if (!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);

	</script>