在前端开发中，我们经常会使用 CSS 来进行页面的布局和样式设计。其中，rem 和 em 是两个常用的单位，它们可以帮助我们实现响应式设计。但是，哪一个更适合响应式设计呢？本文将详细介绍 rem 和 em 的特点，以及它们在响应式设计中的应用。
什么是 rem 和 em？
rem 和 em 都是相对单位，它们的值都是相对于其父元素的字体大小。但是，它们的区别在于，rem 是相对于根元素（即 html 元素）的字体大小，而 em 是相对于当前元素的字体大小。
例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。而如果一个元素的字体大小为 1.2em，那么它的字体大小就是当前元素的父元素字体大小的 1.2 倍。
rem 的优点
- rem 的值相对稳定
由于 rem 的值是相对于根元素的字体大小，所以它的值相对比较稳定，不容易受到其它样式的影响。这对于响应式设计来说非常重要，因为我们需要在不同的屏幕尺寸下保持一致的布局和字体大小。
- rem 方便调整
由于 rem 的值是相对于根元素的字体大小，所以我们可以通过修改根元素的字体大小来调整整个页面的大小和布局。这对于响应式设计来说非常方便，因为我们可以通过媒体查询和 JavaScript 来实现根据不同的屏幕尺寸设置不同的字体大小。
em 的优点
- em 方便继承
由于 em 的值是相对于当前元素的字体大小，所以它很适合用于实现字体大小的继承。例如，如果一个元素的字体大小为 1.2em，那么它的子元素的字体大小也会相应地变成当前元素字体大小的 1.2 倍。
- em 方便实现相对尺寸
由于 em 的值是相对于当前元素的字体大小，所以它很适合用于实现相对尺寸。例如，我们可以使用 em 来设置元素的宽度和高度，以便在不同的字体大小下保持一致的比例。
如何选择 rem 或 em？
在实际开发中，我们可以根据具体的需求和情况选择使用 rem 或 em。
如果我们希望实现响应式设计，保持页面的布局和字体大小在不同的屏幕尺寸下保持一致，那么我们应该使用 rem。
如果我们希望实现字体大小的继承和相对尺寸的设置，那么我们应该使用 em。
示例代码
下面是一些使用 rem 和 em 的示例代码：
-- -------------------- ---- -------
-- -- --- ------- --
---- -
---------- -----
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- -
---------- -----
-
- -
---------- -------
-
-- -- -- ----------------- --
---- -
---------- -----
-
-- -
---------- ----
-
- -
---------- ------
-
--- -
------ -----
------- -----
-结论
rem 和 em 都是非常有用的相对单位，它们可以帮助我们实现响应式设计和相对尺寸的设置。在选择使用 rem 或 em 时，我们应该根据具体的需求和情况来选择。如果我们希望实现响应式设计，保持页面的布局和字体大小在不同的屏幕尺寸下保持一致，那么我们应该使用 rem。如果我们希望实现字体大小的继承和相对尺寸的设置，那么我们应该使用 em。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6755e2683af3f99efe540c79