移动端适配方案

这是在网上搜索良久，找到的当前比较合适的适配方案。原理是通过动态计算 ＲＥＭ　基值，来动态调整网页尺寸。写这篇博客纯粹是为了自己学习理解移动端适配，现将代码附上：

/**
 * 移动端适配，根据屏幕宽度与屏幕 dpr 动态写入 html 的 font-size ( rem 基准值)
 * 尽量让这段代码在页面最前面执行
 */
(function(win) {
	
	var opt = {
		dpr: 1,
		rem: 16,
		scale: 1,
		width: "device-width"
	};
	
	var docEl = document.documentElement;
	var fontEl = document.createElement('style');
	var metaEl = document.querySelector('meta[name="viewport"]');

	opt.dpr = win.devicePixelRatio || 1;
	opt.scale = 1 / opt.dpr;
	opt.rem = docEl.clientWidth * opt.dpr / 10;
	opt.width = docEl.clientWidth;
	
	// 设置viewport，进行缩放，达到高清效果
	metaEl.setAttribute('content', 'width=' + opt.dpr * docEl.clientWidth + ',initial-scale=' + opt.scale + ',maximum-scale=' + opt.scale + ', minimum-scale=' + opt.scale + ',user-scalable=no');

	// 设置data-dpr属性，留作的css hack之用
	docEl.setAttribute('data-dpr', opt.dpr);

	// 动态写入样式
	docEl.firstElementChild.appendChild(fontEl);
	fontEl.innerHTML = 'html{font-size:' + opt.rem + 'px!important;}';

	// 给js调用的，某一dpr下rem和px之间的转换函数
	win.parsePx = function(v) {
		v = parseFloat(v);
		return v * opt.rem;
	};
	
	win.parseRem = function(v) {
		v = parseFloat(v);
		return v / opt.rem;
	};

	win.dpr = opt.dpr;
	win.rem = opt.rem;
}(window));