1. 什么是 Em 和 Rem 单位？
在 CSS3 中，Em 是指元素所继承字体的大小，而 Rem 表示根元素(html)的大小，因此 Rem 的大小在整个文档中是固定的，而 Em 的大小在整个文档中会因为继承的字体大小不同而有所变化。
Em 和 Rem 两者的主要区别是在于计算基准值上不同。Em 计算的基准值是其父元素继承而来的字体大小，而 Rem 则是以根元素的字体大小为计算基准值。
/* em 示例 */
.child {
font-size: 2em; /* 字体大小为父元素字体大小的 2 倍 */
}
/* rem 示例 */
:root {
font-size: 16px;
}
.child {
font-size: 2rem; /* 字体大小为根元素字体大小的 2 倍，即 32px */
}
2. Em 和 Rem 的使用场景和优缺点？
2.1 Em 的使用场景和优缺点
Em 可以用于响应式布局，即字体大小随设备宽度自适应变化。例如，在移动端中，使用 Em 单位可以根据不同的设备宽度，自适应调整字体大小。
Em 还可以用于实现一些比较复杂的布局效果，例如最近流行的圆角遮罩效果，它需要将字体大小和盒子大小相结合来实现。
Em 的缺点是层层嵌套的时候，容易出现字体大小失控。因为 Em 计算的基准是其父元素的字体大小，一层层嵌套下来，字体大小难以控制。
/* em 失控示例 */
.parent {
font-size: 2em;
}
.child {
font-size: 2em; /* 会继承 parent 中的字体大小，因此实际上字体大小为 4em */
}
.grandchild {
font-size: 1.5em; /* 会继承子元素 child 中的字体大小，因此实际上字体大小为 6em */
}
/* em 失控的解决方法是使用 Rem */
2.2 Rem 的使用场景和优缺点
Rem 可以用于响应式布局，与 Em 类似，但优点是计算基准值是相对固定的。因此，在整个文档中，字体大小是比较统一的。
Rem 也可以用于实现一些比较复杂的布局效果，例如使用 Rem 实现圆角遮罩，或者一些类似于根据屏幕高度计算文字大小的应用。
Rem 的缺点是不够灵活，相比 Em，Rem 可以缩放的范围较小。同样是字体大小随设备大小变化，Em 可以做到更加细腻，而 Rem 则需要设置很多断点来处理不同设备，增加了工作量。
/* html 标签中设置基准 font-size */
:root {
font-size: 16px;
}
/* rem 布局示例 */
.container {
width: 30rem; /* 在整个文档中，字体大小基于 16px 计算，因此此处的宽度为 480px */
margin: 0 auto;
}
3. 综合比较 Em 和 Rem 的使用
如果需要实现不同字体大小、布局效果的网页，建议综合使用 Em 和 Rem。针对不同的需求，选择不同的单位。
例如，在响应式布局中，可以使用 Rem 作为基准来处理整个文档中元素的字体大小，但是在处理一些特殊元素，例如标题和小标题时，使用 Em 单位，是比较方便的。
另外，值得注意的是，在使用 Em 和 Rem 时，要注意避免层级嵌套过深的情况，这样可能会导致字体大小失控。
使用 Em 和 Rem 可以使 CSS3 中字体大小的设置更为灵活，更加便捷。但应该注意合理使用，避免出现失控的情况。