移动端屏幕适配问题

简单适配样式

// 原理：1rem = viewWidth / 系数
//两种获取viewWidth的方法
document.documentElement.getBoundingClientRect().width
window.innerWidth
//封装
(function(){
	'use strict';
	setRemUnit();
	window.addEventListener('resize',setRemUnit)

	function setRemUnit(){
		var docEle = document.documentElement
		var ratio = 18.75 //设定系数
		var viewWidth = docEle.getBoundingClientRect().width 
					|| window.innerWidth;
		//设置html的字体大小
		docEle.style.fontSize = viewWidth / ratio + 'px'
	}
}

通用适配方案

//当你设置了一个1px的边框的时候，简单的适配方案就不起作用了，
//如何在使用px单位的情况下也能进行屏幕适配
//原理 dpr->scale = 1/dpr  缩放比例与设备像素比进行适配
(function(){
	'use strict';
	var docEl = document.documentElement,
	//获取meta标签
		viewportEl = document.querySelector('meta[name="viewport"]'),
	//获取像素比
		dpr = window.devicePixelRatio || 1,
		maxWidth = 540,
		minWidth = 320;
	//设置像素比
	dpr = dpr >= 3?3:(dpr>=2?2:1)
	docEl.setAttribute('data-dpr',dpr);
	//修改缩放比
	var scale = 1/dpr,
		content = 'width=device-width,initial-scale='+scale+',maximun-scale='+scale+',minimun-scale='+scale+',user-scalable=no';
	
	if(viewportEl){
		viewportEl.setAttribute('content',content);
	}else{
		viewportEl = document.createElement('meta')
		viewportEl.setAttribute('content',content);
		viewportEl.setAttribute('name','viewport');
		document.head.appendChild(viewportEl)
	}
	setRemUnit();
	window.addEventListener('resize',setRemUnit)

	function setRemUnit(){
		var ratio = 18.75 //设定系数
		var viewWidth = docEle.getBoundingClientRect().width 
					|| window.innerWidth;
		//设置html的字体大小
		if(maxWidth && (viewWidth / dpr > maxWidth)){
			viewWidth = maxWidth * dpr;//限制最大值
		}else if(minWidth && (viewWidth / dpr < minWidth)){
			viewWidth = minWidth * dpr;//限制最小值
		}
		docEle.style.fontSize = viewWidth / ratio + 'px'
	}
}