CSS中em的正确打开方式详解

什么是em?

em是一个相对单位，它的大小取决于其所处的元素的字体大小。一般情况下，1em等同于元素的字体大小。

em的使用场景

1. 父元素字体大小改变时，子元素的大小也会相应改变
2. 在相对单位的情况下，可以灵活地根据浏览器缩放或者用户使用的设备的不同，自适应调整元素的大小

em的一些应用场景

设置行高

body {
  font-size: 16px;
  line-height: 1.5em;
}

上面的代码中，1.5em会根据body元素的font-size的大小，自动算出它的行高，等同于一个1.5倍行高。

按比例缩放元素大小

p {
  font-size: 1em;
}

h1 {
  font-size: 2em
}

h2 {
  font-size: 1.5em;
}

上面的代码中，h1元素的字体大小是p元素的两倍，h2元素的字体大小是p元素的1.5倍，em使字体大小变得更加灵活。

其它注意事项

1. em不能嵌套使用，因为嵌套使用会导致字体大小不断放大。
2. 如果想要基于根元素进行缩放，可以使用rem，1rem等同于根元素(html元素)的字体大小。

以上均为个人见解，仅供参考，谢谢！