rem的认识及使用方法

什么是rem？
根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。
rem：相对于页面的整体缩放过程

1rem = 1/100 × 页面的宽度

注意 这里的1/100是将

document.documentElement.style.fontSize
字体的大小设置为宽度的1/100 就是最外根元素的字体的大小=1rem 和em有所不同

利用

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + ‘px’;
来进行设置

vw：理解为宽度的1/100（CSS3）

vh理解为高度的1/100(CSS3)
html代码如下

html{
	font-size: 10px;
}

js代码如下

<script type="text/javascript">
		(function(doc, win) {
			var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function() {
					var clientWidth = docEl.clientWidth;
					if(!clientWidth) return;
					if(clientWidth >= 750) {
						docEl.style.fontSize = '100px';
					} else {
						docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
					}
				};

			if(!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
		
	</script>