rem 简介

rem 是网页上的一种长度单位。

如果根节点（html 节点）的字体大小是 16px，那么：

• 2rem 就等同于 32px；
• 3rem 就等同于 48px；
• 1.5rem 就等同于 24px；

也就是：

html{
  font-size: 14px;
}
.target{
  width: 2rem; /* 28px */ 
}

有时为了方便计算，会把根节点的字体设置成 10 的倍数，比如

html {
  font-size: 100px;
}
.another-target{
  font-size: 0.16rem; /* 16px */
  width: 1rem; /* 100px */
}

有时在 2 倍屏上，会有这种计算技巧

html{
  font-size: 50px;
}
.another-another-target{
  width: 1rem; /* 50px，但因为是 2 倍屏，所以其实是 100px */
}