移动端适配

适配问题整理：

一、响应式：

1.移动端需要设置meta标签

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

其中：

①、width=device-width：是设置可视区宽度等于设备宽度
②、initial-scale=1.0：初始化缩放比例
③、maximum-scale=1.0：最大可以放大的比例
④、minimum-scale=1.0：最小可以缩小的比例
⑤、user-scalable = 0： 是否允许用户缩放（1为true,0为false）

html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }		/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
@media(max-width:375px){ html { font-size:58.59px; } }	/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }	/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }		/*i5宽度*/

3、750的设计稿

html { font-size:100px; font-family:'微软雅黑','苹方','思源黑体';  }  /*效果图750px*/
@media(max-width:640px){ html { font-size:85.33px; } }  /*Android常用宽度*/
@media(max-width:540px){ html { font-size:72px; } }     /*Android常用宽度*/
@media(max-width:480px){ html { font-size:64px; } }     /*Android常用宽度*/
@media(max-width:445px){ html { font-size:60px; } }
@media(max-width:414px){ html { font-size:55.2px; } }   /*i6Plus,i7Plus宽度*/
@media(max-width:375px){ html { font-size:50px; } }     /*i6,i7宽度*/
@media(max-width:360px){ html { font-size:48px; } }     /*Android常用宽度*/
@media(max-width:320px){ html { font-size:42.67px; } }    /*i5宽度*/

二、用js去修改

(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        //console.log("rem font-size:", rem)
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	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() {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 1024);

三、也可以

1、先在开头：

document.documentElement.style.fantSize=document.documentElement.clientWidth/100+'px'

2、利用less

w（@px）{
width：unit（@px/37.5,rem）
}