rem 和百分比都是相对单位，在前端开发中常用于响应式布局，但它们有不同的参考对象，导致使用场景和优缺点也各有不同。
rem (root em)
-
优点:
- 可维护性强:
rem的大小是相对于根元素（<html>）的字体大小，这意味着你只需要修改根元素的字体大小，就可以控制整个页面的缩放比例。这使得维护和调整页面布局变得非常方便。 - 可访问性好: 用户可以通过浏览器设置调整字体大小，而使用
rem的布局会根据用户的设置进行缩放，从而提高了网站的可访问性。 - 计算方便:
rem的值是直接乘以根元素字体大小，计算比较直观。
- 可维护性强:
-
缺点:
- 兼容性略逊于百分比: 虽然现在主流浏览器都支持
rem，但在一些非常老的浏览器中可能需要使用 polyfill。 - 依赖根元素字体大小: 如果 JavaScript 代码修改了根元素的字体大小，可能会影响到使用
rem的元素，需要小心处理。
- 兼容性略逊于百分比: 虽然现在主流浏览器都支持
百分比 (%)
-
优点:
- 兼容性好: 百分比是 CSS 中最古老的相对单位之一，拥有非常好的浏览器兼容性。
- 上下文相关: 百分比的大小是相对于其父元素的，这在某些场景下非常有用，例如设置元素的宽度或高度相对于父容器。
-
缺点:
- 可维护性较差: 由于百分比是相对于父元素的，嵌套层级较深时，计算会变得复杂，难以维护。例如，一个元素的宽度是其父元素的 50%，而其父元素的宽度又是其祖父元素的 50%，那么这个元素的宽度相对于祖父元素就是 25%。
- 可访问性问题: 使用百分比设置字体大小时，如果用户通过浏览器设置调整字体大小，可能会导致布局错乱，影响可访问性。 因为百分比是相对于父元素的字体大小，而不是根元素。
主要区别总结:
| 特性 | rem | 百分比 (%) |
|---|---|---|
| 参考对象 | 根元素 (<html>) 的字体大小 |
父元素的尺寸 |
| 可维护性 | 强 | 弱 |
| 可访问性 | 好 | 字体大小方面存在问题 |
| 计算方式 | 直接乘以根元素字体大小 | 相对于父元素尺寸计算 |
| 兼容性 | 较好 (老旧浏览器可能需要 polyfill) | 非常好 |
| 使用场景 | 字体大小、整体布局缩放 | 元素宽度、高度、位置等相对于父元素的设置 |
选择建议:
- 字体大小和整体布局缩放: 推荐使用
rem，方便维护和调整，并提供更好的可访问性。 - 相对于父元素的尺寸设置: 推荐使用百分比，例如设置元素的宽度或高度。
- 需要兼容非常老的浏览器: 百分比是更安全的选择。
总而言之，rem 和百分比各有优缺点，选择哪种单位取决于具体的场景和需求。 在现代前端开发中，rem 由于其可维护性和可访问性的优势，在整体布局和字体大小设置方面更为常用。 但百分比仍然在某些特定场景下有其不可替代的作用。