1. 程式人生 > >移動端開發rem設定

移動端開發rem設定

使用自呼叫匿名函式,設定rem的比例。

;(function(win) {

	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (width > 750) { // 最大寬度
		width = 750;
		}
		var rem = 100 * (width / 750); // 
		docEl.style.fontSize = rem + 'px';
	}

	win.addEventListener('resize', function() {//視窗大小改變事件
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);
	
	win.addEventListener('pageshow', function(e) {//瀏覽頁面事件與onlaod事件類似
		if (e.persisted) {
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);
 
	refreshRem();
 
})(window);