rem和em的区别，以及他们各自的用法和使用场景

rem 和 em 都是前端开发中用于设置字体大小和元素尺寸的相对单位。它们的主要区别在于它们相对于不同的参考点计算大小。

1. rem（Root Em）：

rem当中的r指的就是root也就是元素的根结点
rem 是相对于根元素（通常是 <html> 标签）的字体大小来计算的。
当你设置一个元素的字体大小为 1rem 时，它将等于根元素的字体大小。
使用 rem 单位使得调整整个页面的字体大小变得容易，只需更改根元素的字体大小即可，其他元素会相应地调整。
例如，如果根元素也就是html的字体大小为 16px，那么 1rem 就等于 16px。如果你设置某个元素的字体大小为 2rem，它将等于 32px。

    <div class="son" style="font-size: 1rem;">this is son</div>
    <div class="son" style="font-size: 2rem;">this is son</div>

2. em：

em 是相对于父元素的字体大小来计算的。
当你设置一个元素的字体大小为 1em 时，它将等于其父元素的字体大小。
使用 em 单位可以创建相对于父元素的可伸缩和可继承的样式。
例如，如果某个父元素的字体大小为 16px，而其内部的子元素设置字体大小为 2em，那么子元素的字体大小将为 32px（2 * 16px）。

  <div class="father" style="font-size: 16px;">
    this is father
    <div class="son" style="font-size: 1em;">this is son</div>
    <div class="son" style="font-size: 2em;">this is son</div>
  </div>

使用场景和作用：

使用 rem 通常更适合于整体布局的控制，因为它是相对于根元素的，可以轻松实现全局的字体大小控制。它在响应式设计中很有用，可以在不同屏幕尺寸下保持一致的比例关系。
使用 em 更适合于局部的样式控制，因为它是相对于父元素的。这对于创建可伸缩的组件非常有用，这些组件的大小应该相对于它们的父元素而言是相对的。

总的来说，选择使用 rem 还是 em 取决于你的具体需求和设计目标。通常，你会在项目中同时使用这两种单位来达到最佳的样式控制效果。