简述rem和em的区别？

八股文_CSS面试题 1 71

参考回答

rem和em都是相对单位，用于设置元素的尺寸、间距、字体等。它们的主要区别在于：

rem（root em）是相对于根元素（通常是<html>元素）的字体大小来计算的，通常用于统一的布局和字体控制。
em是相对于当前元素的字体大小来计算的，因此它会受到父元素字体大小的影响，具有继承性。

详细讲解与拓展

这两个单位虽然相似，但由于其计算方式的不同，适用于不同的场景。

1. rem（root em）

rem是“root em”的缩写，意思是它相对于根元素（<html>）的字体大小来计算。默认情况下，浏览器的根元素字体大小通常为16px，但可以通过设置<html>元素的font-size来改变根字体大小。
例如：
```
html {
font-size: 16px;
}
p {
font-size: 2rem; /* 2 * 16px = 32px */
}
```
这里，<p>元素的字体大小会是32px，因为rem单位总是相对于根元素的字体大小。
优点：
- 它不会受到父元素的字体大小影响，计算方式简单。
- 适合全局字体、布局的统一调整，尤其是在响应式设计中很有用。

2. em

em单位相对于当前元素的字体大小来计算。它是一个继承单位，这意味着如果一个元素的父元素设置了字体大小，子元素的em值会相对于父元素的字体大小进行计算。
例如：
```
div {
font-size: 20px;
}
p {
font-size: 2em; /* 2 * 20px = 40px */
}
```
在这个例子中，<p>元素的字体大小会是40px，因为它继承了父元素<div>的字体大小（20px）。
优点：
- 适合于局部的、与父元素尺寸相关的样式调整。
- 由于其继承性，可以灵活地调整嵌套元素的字体大小。

总结对比：

rem： 计算基准是根元素<html>的字体大小，不受父元素的影响，适合全局控制。
em： 计算基准是当前元素的字体大小，会继承父元素的字体大小，适合局部控制和嵌套元素的字体调整。

使用建议：
– 如果希望在整个网站中保持一致的字体大小和布局比例，使用rem更为合适。
– 如果希望根据父元素的字体大小来调整子元素的尺寸，可以使用em，这样可以实现更加灵活和动态的布局调整。

发表评论取消回复

后才能评论