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。