移动端开发之根元素rem单位计算函数

什么是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;
	}