em和rem都是 CSS 字体大小单位，可以在 CSS 文档中使用它们来使特定元素相对于其父元素的字体大小。
em 是相对于其直接链接的父元素的 CSS 字体大小单位，rem与根元素的字体大小相关，根元素基本上是 HTML 元素。
还有许多其他 CSS 单元可用。让我们通过一个合适的例子来理解 em 和 rem 之间的区别。
EM CSS 单位： em单位相对于其父级的大小。
- 1 em = 父级的大小
- 2 em = 父母大小的两倍
- 0.5em = 父级大小的一半
例子：
HTML
Great Grand Parent - Base Font Size
- GrandParent 1
- Parent 1
- Child 1
- GrandChild 1
- GrandChild 2
- Child 2
- Parent 2
- GrandParent 2
HTML
Great Grand Parent - Base Font Size
- GrandParent 1
- Parent 1
- Child 1
- GrandChild 1
- GrandChild 2
- Child 2
- Parent 2
- GrandParent 2
输出：当元素相互嵌套时，元素的相对大小在上例中以 2 倍的速度呈指数增长。
在这个例子中，子元素相对于父元素的相对大小为 2em（父元素字体大小的 2 倍），而父元素相对于祖父元素是 2em（父元素的 2x 父元素），现在是祖父元素的 4 倍。
CSS em 单位
- 基本元素 (GreatGrandParent) 的大小：15px
- GrandParent1,2 尺寸：30px
- 父 1,2 尺寸：60px
- 子 1,2 尺寸：120px
- 孙子 1,2: 240px
REM CSS 单位： rem单位相对于其基本根父元素的大小。
- 1 rem = 根父级（HTML 元素）的大小
- 2 rem = 根父级（HTML 元素）大小的两倍
- 0.5r em = 根父级（HTML 元素）大小的一半
HTML 代码：在这种情况下，当元素相互嵌套时，元素的相对大小保持不变，因为每个元素的大小与根 HTML 元素而不是其直接父元素成比例，因此属性不会向下传递到子元素和孙元素元素。
在这个特定的例子中，父元素的相对大小为 2rem（根 HTML 元素字体大小的 2 倍）wrt 根元素与其子元素和孙元素相同，因此即使在多个级别嵌套后，大小也保持不变.
HTML
Great Grand Parent - Base Font Size
- GrandParent 1
- Parent 1
- Child 1
- GrandChild 1
- GrandChild 2
- Child 2
- Parent 2
- GrandParent 2
输出：
CSS rem 单位
- Base（GreatGrandParent）的字体大小：15px
- GrandParent1,2/Parent1,2/Child1,2/GrandChild1,2 字体大小 = 30px
注意：请注意上面两个示例的输出以了解区别。
使用rem优于em 的优点：
- 在使用媒体查询功能将我们的应用程序扩展为响应式布局时，我们可以直接更改根元素的基本字体大小，并且每个子元素都可以直接在根元素上使用一个媒体查询来直接缩放。
- 当用户更改了任何浏览器的默认基本字体大小时，我们的应用程序在这种情况下可以很好地扩展 CSS rem单位。
浏览器支持：
| Browser | Chrome | Opera | Safari | Firefox | Internet Explorer |
| em | 1.0 | 3.5 | 1.0 | 1.0 | 3.0 |
| rem | 4.0 | 20.0 | 4.1 | 3.6 | 9.0 |