rem 与 em 总结

这篇文章主要总结一下 rem 和 em 这两个 CSS 单位，因为前端现在很多都是面向移动端的，需要弹性布局之类的，所以简单总结一下。

rem

rem 有两种情况：

html{
  font-size: 3rem
}

这时候 rem 作为根元素 html 的单位，所以 1rem = 16px。

所以相等于：

html{
  font-size: 48px
}

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

这时 rem 作为非根元素的单位，1rem = 48px.

所以相等于:

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

em 也有两种情况：

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

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

上面这种情况，1em = 16px,所以子元素的 font-size 等于 32px。

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

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

这种情况，1em = 32px，所以子元素的 width 等于 64px。

除了这两种单位之外，还有 vw 和 vh 。

vw 等于视口宽度的 1/100；

vh 等于视口高度的 1/100； vw 和 vh 经常和 calc 属性结合使用。比如，我们左边有一个固定宽度为200px的侧边栏，右边的宽度自适应。这时候就可以给右边设置

width: calc(100vw - 200px);

实际上 rem 布局在前端还是有很多争议的，因为它属于弹性布局，强调等比缩放，会根据屏幕的大小变化。很多人认为这并不合理，大的屏幕是为了显示更多的内容，而不是更大的字体。一些内容型网站就不适合使用 rem，而一些图标、图片占比比较大的应用，会比较适合使用 rem 弹性布局。

当然，以上几种单位都是 CSS3 新增的，兼容性比较差，当你的应用不需要考虑兼容性的时候可以尝试，目前业内比较好的解决方案有手淘的 flexible.js，也可以自己结合媒体查询使用。