使用rem布局编写的大致流程

1.按照UI设计图给的标准尺寸进行开发，css单位使用px；
2.将px根据当前font-size大小替换为rem；
3.当屏幕大小发生变化，实时改变font-size大小代码如下：

<script>
	// 动态设置页面字体大小，使用rem
	function resizeBaseFontSize () {
		var html = document.documentElement; // 获取HTML文档大小
		var proportion = html.clientWidth / 120;   // 我开发的页面是1920设备，16px字体，所以我的比例是120
		proportion = proportion < 9 ? 9 : proportion;   // 从px单位转换rem单位的倍数
		html.style.fontSize = proportion + 'px';   // 设置给当前根节点大小
		html.style.minWidth = '1162px';   // 限制屏幕的最小尺度，可根据个人情况而定
	}

	// 当浏览器窗口大小改变的时候将会触发onresize事件
	window.onresize = function () {
		resizeBaseFontSize();  // 当浏览器大小改变时触发
	};
	resizeBaseFontSize();  // 页面初次加载触发
</script>

还有jQuery的写法

$(window).resize(function(){
    resizeBaseFontSize();
});

主要是何时使用单位的思路，我刚开始写的时候不知道怎么下手处理px和rem。基本原则就是先写标砖屏幕，再根据比例进行单位替换。