搞懂 rem 和 em ？

em：相对父元素长度单位

em是一种相对长度单位，它基于父元素的字体大小而定。 em的值表示当前元素的字体大小的倍数。

rem：root em 相对跟节点长度单位

与em不同，rem是一个根据根元素（即html元素）字体大小而定的单位。这意味着当使用rem作为单位时，它的值不会受到层次结构中任何其他元素的影响。 ``

.parent-root {
  font-size: 16px;

  .em {
    font-size: 2em; /* em  font size输出为 32px */
  }

  .rem {
    font-size: 2rem; /* child-em  font size输出为 32px */
  }

  .child {
    font-size: 24px;

    .child-em {
      font-size: 2em; /* child-em  font size输出为 48px  因为相对父元素 font-size: 24px;*/
    }

    .child-rem {
      font-size: 2em; /* child-em  font size输出为 32px  因为跟元素 font-size: 24px;*/
    }
  }
}