rem 有两种情况：

1: 作为根元素的单位时，相对于初始字体的大小，即 16px 这时候 rem 作为根元素 html 的单位，所以 1rem = 16px 如下demo

See the Pen rem & em by zakihuang (@zakihuang) on CodePen.

2: 作为非根元素单位时，相对于根元素的字体大小。 这时 rem 作为非根元素的单位，1rem = 48px. 所以 以下两种写法效果等价

html{
  font-size: 48px
}
p{
  font-size: 2rem
}

html {
  font-size: 48px
}
p {
  font-size: 96px
}

em 也有两种情况：

1: 作为 font-size 的单位时，相对于父元素的字体大小 下以这种情况，1em = 16px,所以子元素的 font-size 等于 32px。

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  font-size: 16px
}
.child{
  font-size: 2em
}

2: 作为 非 font-size 的单位时，相对于自身的字体大小 这种情况，1em = 32px，所以 子元素的 width 等于 64px。

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  font-size: 16px
}
.child{
  font-size: 32px；
  width: 2em
}