rem相对于根元素字体大小，适合全局控制；2. em相对于父元素字体大小，适合组件内部自适应；3. 推荐rem用于布局尺寸，em用于局部弹性设计，结合使用提升响应式灵活性与可维护性。
在CSS中，rem 和 em 都是相对单位，适合用于构建响应式布局。它们能帮助开发者创建更具可维护性和可伸缩性的样式系统。正确使用这两个单位，可以让页面在不同设备上表现更自然、更协调。
理解 rem 与 em 的基本区别
em 是相对于当前元素的字体大小，如果未设置，则继承父元素的字体大小。它的层级嵌套会影响最终计算结果，容易造成不可控的放大或缩小。
rem 是相对于根元素（html）的字体大小，不受父级影响，更加稳定，适合做全局尺寸控制。
例如：- 若 html 字体为 16px，1rem = 16px
- 若父元素字体为 20px，1em = 20px；子元素若未重设字体，其 em 仍基于父级
使用 rem 实现可伸缩的响应式布局
推荐用 rem 控制布局中的外边距、内边距、字体大小等全局性尺寸，便于统一缩放。
立即学习“前端免费学习笔记（深入）”；
结合媒体查询动态调整根字体大小，实现整体比例缩放。
- 默认 html 字体设为 16px（浏览器默认值），便于计算
- 在小屏幕上设置 html { font-size: 14px; }，所有 rem 尺寸自动按比例缩小
- 使用 rem 设置 padding、margin，使间距随整体设计缩放
利用 em 处理组件内部的相对尺寸
em 更适合用于组件内部，比如按钮内边距随字体变化、提示框大小依赖文字尺寸等场景。
它让组件具备“自适应”能力，不依赖外部固定值。
典型应用：- 按钮的 padding 设为 em：padding: 0.5em 1em；文字变大时，按钮自动撑开
- 图标与文字间距用 em，保持视觉比例一致
- 响应式文本容器内使用 em 调整行高或内边距，避免断行错乱
结合 rem 与 em 构建弹性系统
最佳实践是rem 控全局，em 管局部。这样既能保证整体一致性，又保留组件灵活性。
建议做法：- html 字体用 px 或 % 设置基准，如 html { font-size: 16px; }
- 字体大小、外边距等用 rem
- 组件内部间距、图标尺寸等用 em，使其响应自身字体
- 配合 CSS 自定义属性（变量）管理根字体，提升维护性
基本上就这些。合理搭配 rem 与 em，能让响应式设计更自然、更可控，不复杂但容易忽略细节。关键在于明确每个单位的适用场景，避免混用导致混乱。
