rem 和 em

rem 和 em 是两种常用于 CSS 中的相对长度单位，它们的主要区别在于参考的基准不同。以下是它们的详细区别和使用场景：

1. em 单位

• 基准：em 是相对于 当前元素的字体大小 来进行计算的。它的值是相对于元素自身或其父元素的字体大小。

• 继承特性：em 单位会随着嵌套的层级变化而变化，因为它依赖于父元素的字体大小。

   

  例如：

  css
  /* 假设 body 的字体大小为 16px */
  body {
      font-size: 16px;
  }
  
  /* div 元素的字体大小是 16px 的 2 倍，即 32px */
  div {
      font-size: 2em; /* 32px */
  }
  
  /* p 元素的字体大小是 div 的字体大小（32px）的 1.5 倍，即 48px */
  div p {
      font-size: 1.5em; /* 48px */
  }
  
  css
  

• 优点：em 的灵活性可以方便地对嵌套元素进行相对调整，比如设置 padding、margin 时，元素的间距会随字体大小的变化而变化。

• 缺点：由于 em 依赖于当前元素的字体大小，它在多层嵌套时可能难以控制，容易导致计算复杂。

2. rem 单位

• 基准：rem 是相对于 根元素（即 html 元素）的字体大小 来进行计算的。通常，浏览器的默认字体大小为 16px，但可以通过设置 html { font-size: ... } 来更改它。

• 继承特性：rem 是固定基于根元素的字体大小，无论嵌套多深，都不会随子元素的字体大小变化。

   

  例如：

  css
  /* 假设 html 的字体大小为 16px */
  html {
      font-size: 16px;
  }
  
  /* div 元素的字体大小是 16px 的 2 倍，即 32px */
  div {
      font-size: 2rem; /* 32px */
  }
  
  /* p 元素的字体大小也是相对于 html 元素的 1.5 倍，即 24px */
  div p {
      font-size: 1.5rem; /* 24px */
  }
  
  css
  

• 优点：由于 rem 始终基于根元素的字体大小，它更加可控、稳定，不会因为嵌套关系而导致样式变得不可预测。适合全局统一尺寸的设计。

• 缺点：rem 缺乏像 em 那样的灵活性，不能轻易根据局部环境进行调整。

3. 选择使用场景

• 使用 em 的场景：当你希望元素的尺寸（包括字体大小、padding、margin 等）能够根据当前元素或其父元素的字体大小进行灵活调整时，em 是非常合适的选择。例如，用在局部调整或组件内部布局。
• 使用 rem 的场景：当你希望整个页面的某些尺寸是固定相对于根元素的，比如全局一致的字体大小、全局一致的间距、按钮高度等，这时候使用 rem 更加直观和容易控制。

总结

• em 是相对于当前元素或父元素的字体大小。
• rem 是相对于根元素 (html) 的字体大小。

rem 更适合用于全局一致的设计，em 更适合局部调整时使用。根据实际需求选择最适合的单位可以帮助你在设计时保持代码的灵活性和可维护性。