rem 与 CSS 中的 em 有何不同？(1)

📌 相关文章

📜 rem 与 CSS 中的 em 有何不同？(1)

📅 最后修改于: 2023-12-03 15:19:48.154000 🧑 作者: Mango

rem 与 CSS 中的 em 有何不同？

在 CSS 中，我们经常会用到相对长度单位 em 以及 rem，它们类似于像素或者英寸这样的绝对长度单位。但是，em 和 rem 与像素或英寸不同，它们是相对于其他长度单位的，而不是绝对的。

em

em 是相对于当前元素的字体大小来计算的长度单位。它的值等于当前元素字体大小的倍数。例如，如果一个元素的字体大小为 16px，那么 1em 就是 16px，2em 就是 32px。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 1.5em = 24px */
}

rem

在 CSS3 中，引入了一个新的相对长度单位 rem。rem 表示相对于根元素的字体大小来计算的长度单位。根元素是指 <html> 元素，它的默认字体大小通常为 16px。

假设一个根元素的字体大小为 16px，那么 1rem 就等于 16px。如果根元素的字体大小改成了 20px，那么 1rem 就等于 20px。

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;  /* 1.5rem = 24px */
}

rem 与 em 的区别

使用 em 作为长度单位时，其计算方式是相对于父元素的字体大小，因此如果在嵌套的层级结构中，可能会导致使用不当而产生一些没有预期的结果。而使用 rem，可以避免这种问题。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 1.5em = 24px，相对于父元素的字体大小 */
}

.grandchild {
  font-size: 1.5em;  /* 1.5em = 36px，相对于父元素的字体大小 */
}

html {
  font-size: 16px;
}

.parent {
  font-size: 1.5rem;  /* 1.5rem = 24px */
}

.child {
  font-size: 1.5rem;  /* 1.5rem = 24px */
}

.grandchild {
  font-size: 1.5rem;  /* 1.5rem = 24px */
}

总结

em 和 rem 都是相对长度单位，它们的区别在于计算方式的不同。em 是相对于父元素的字体大小来计算的，而 rem 是相对于根元素的字体大小来计算的。当需要在一个嵌套的层级结构中使用长度单位时，rem 往往比 em 更可靠。