什麼是rem

rem與em是用作手機端的單位，rem是根據根元素html來定義的一個單位大小，爾em是根據父元素繼承計算的單位值，因此我們更多的會使用到rem單位。那麼我們如何定義根元素HTML的大小呢？請看下面程式碼：

$(function(){
	function setRem(){
		var windowWidth = $(window).width();
		console.log(windowWidth);
		var rem = parseInt(windowWidth/375*100)+'px';
		$('html').css('font-size',rem);
 

		console.log(rem)
	}
	setRem();
	var timer;
	$(window).on('resize',function(){
		timer=setTimeout(function(){
			clearTimeout(timer);
			setRem();
		},50)
	})
})

程式碼非常的簡單，我們通過獲取到當前裝置的寬度除以一個css畫素值，這個css畫素值是我們定義的一個標準，例如在375的螢幕寬度下我們獲取到的寬度是100px，如果螢幕更多則值相應變大，當螢幕的寬度在實時變化時我們可以呼叫一個一次性函式使得螢幕改變後有一定的延遲去改變HTML的fontsize，這個一次性函式不是必然的可以不寫。而設定為100px或者是10px這個值不是我們想要的，我們只是為了方便計算，我們設定全域性字型時同樣可以直接在body設定了，注意這裡設定的是rem值，如下程式碼：

body{
		background: red;
		font-size: .2rem;
	}