web自適應尺寸方法

原文連結

移動端頁面開發通常用的是rem單位來做不同解析度螢幕的自適應，那我們怎麼從UI設計稿的PX畫素單位自動轉換到rem呢？

我們寫了一個方法來解決，只要輸入設計稿的元素尺寸，就可以自動轉換過來。

//寬度基準
!(function(win, doc) {
	function setFontSize() {
		var docEl = doc.documentElement;
		var winWidth = docEl.clientWidth;
		doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
	}
	var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
	var timer = null;
	win.addEventListener(evt, function() {
		clearTimeout(timer);
		timer = setTimeout(setFontSize, 300);
	}, false);
	win.addEventListener('pageshow', function(e) {
		if (e.persisted) {
			clearTimeout(timer);
			timer = setTimeout(setFontSize, 300);
		}
	}, false)
	setFontSize();
}(window, document))
複製程式碼

上述程式碼中的1080就是你設計稿設計的尺寸，根據不用的尺寸來填寫，然後呼叫這個方法後，你頁面所有的元素單位就會轉換為rem，在頁面具體中的用法就是，比如你設計稿的文字大小為12px,那麼你在頁面樣式程式碼中就要寫成0.12rem，以此類推，頁面程式碼中的尺寸就是你設計稿中的原始尺寸除以100。