em和rem单位(为什么要使用em和rem)

一、何为em和rem 单位

em和rem都是相对长度单位，相对于视觉部分中字体的大小进行计算。其中，em单位是相对于父元素字体大小计算，而rem单位是相对于根元素字体大小计算，即html元素的字体大小。

两者的计算方式如下：

  em = element font-size / parent font-size
  rem = element font-size / root font-size (通常为16px)

二、em和rem之间的差异

虽然em和rem都是相对长度单位，但它们在使用时存在一些差异。

1、em的使用

em单位非常适合在细节方面进行调整，例如间距、圆角等。但是在使用时，需要进行多次计算，难以确定绝对值。

示例代码：

  <div style="font-size: 20px;">
  <p style="font-size: 1.2em; margin: 0.5em;">这是一段文本</p>
  <p style="font-size: 1.5em; margin: 0.5em;">这是另一段文本</p>
  </div>

2、rem的使用

相比em，rem更加简单易用，因为它是相对于根元素字体大小进行计算，如果在根元素上设置了一个基础字体大小，那么后续的修改只需要在根元素上进行修改即可。

示例代码：

  html { font-size: 16px; }
  body { font-size: 1rem; }
  h1 { font-size: 2rem; }
  p { font-size: 1.5rem; }

三、如何选择em和rem单位

在选择em和rem类型时，需要根据设计需求进行选择。如果需要进行精确的调整，可以选择em单位，但是如果希望更简单方便，可以选择rem单位。

综上所述，em和rem都有各自的优点和适用场景，需要在具体情况下进行选择。

四、避免混淆

在使用em和rem时，很容易产生混淆。因为em单位是相对于父元素字体大小计算，所以如果父元素字体大小改变，子元素大小也会随之变化。而rem单位是相对于根元素字体大小进行计算，所以子元素的大小不会随着父元素字体大小的变化而变化。

示例代码：

  html { font-size: 16px; }
  body { font-size: 1rem; }
  .parent { font-size: 2em; }
  .child-em { font-size: 1.5em; }
  .child-rem { font-size: 1.5rem; }