rem和em的区别

# 关于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