CSS计量单位-实现元素大小随页面同步缩放

常见计量单位：

1. px为固定计量单位，不会随页面大小变化。
2. em是相对于父级元素的计量单位，存在迭代关系，计算关系较复杂，如根元素为body，其实际宽度为1em=16px；body下面有一个子元素div，宽度为1.1em，则实际宽度为1.1 * 16px；div下面有一个子元素p，宽度为0.9em，则p元素的实际宽度为0.9 * 1.1 * 16px。
3. rem是相对于根级元素（HTML或body）的计量单位，计算关系较简单，易控制。如2.中例子若采用rem作为计量单位，则二级子元素p的实际宽度为0.9 * 16px 。
4. 推荐各种宽度、高度、长度，字体大小等均采用rem作为计量单位，比较容易控制，当窗口大小变化时，页面元素大小会随着进行变化（各级子元素大小会随着根级元素的大小变化）。也可控制字体大小随着页面的缩放等进行变化。
5. 采用rem可以使整个页面的元素同等比例缩放，防止页面缩放时元素因为大小问题发生错位。

PS：
关于页面中的字体随页面进行同比例的缩放 这个问题，纠结了很久，终于找到一个比较直接的解决办法，就是JS控制html的font-size + 使用rem作为计量单位，可参见以下博文的详细介绍，JS代码参见其中DEMO3的代码（还是有bug,但是算是个初步的解决办法）：
web app变革之rem