# 关于rem和em的区别
### rem
> rem:`表示根元素的字体大小`（通常为``）
> ##### 下面是一个动态设置html字体大小的公式
```
~function () {
window.addEventListener('resize', computed);
// 添加事件，当设备尺寸改变，就执行computed函数
computed();
function computed() {
var deviceW = document.documentElement.clientWidth || document.body.clientWidth;
// 获取设备的宽度
if (deviceW > 640) return;
// 当前案例是以640的设计稿为例，判断，若是设备尺寸超过640，就不在执行computed
document.documentElement.style.fontSize = deviceW / 640 * 100 + 'px';
// 100 这里的100是在屏幕尺寸为640的时候，html字体大小为100px，之所以设置100，是为了便于计算
// 设置html的字体大小 这里是以640的设计稿为基准，当我们使用的设备宽度（deviceW）刚好为640的时候，html的 字体大小为100px; 当设备大小改变，小于640的时候， 就会触发resize函数，computed执行，动态的获取设备的宽度，然后除以640，就能计算出当前设备大小是原设计稿的百分之多少，然后乘以100，就能计算出当前屏幕宽度下html的字体大小为多少 }
}();
```
> - `document.documentElement.style.fontSize `=xxxx 这里是设置html字体大小
> - 以当前的计算公式，若是设备尺寸为640，计算后`html`的字体大小为100px; `1rem` 就是100px; 若是屏幕尺寸缩小到320，`computed`函数会自动获取屏幕的宽度，重新计算html的字体大小，此时`html`字体大小应为50，所以`1rem`就等于50px，
> - 而我们布局采用`rem`布局， `width:.5rem`, 意思就是某个物体的宽度值相对于html的字体大小的值的百分比，`width:.5rem` 就是`width`的值相对于`html`字体大小的百分比为50%。因为html随着屏幕的大小改变，会不停的变化，所以width的值也会跟着改变
##### em
> * em和rem一样都是相对单位，只不过em是以父级的font-size值决定的,当最近的父级没有设置font-size时，就会向上一层找，若是还没有就会一直向上找，直到找到html，若是还没有，就按浏览器默认字体大小，16px(在火狐和chrome);
##### px
> * PX实际上就是像素，用PX设置字体大小时，比较稳定和精确
* 一般浏览器支持的最小字体大小应该为12px;
**注**:以上图片截自 http://www.css88.com/book/css/values/length/em.htm
