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。