使用相对单位（rem、em、%、vw/vh）替代px可实现响应式间距；通过clamp或基准换算设根字号，统一用rem定义间距；vw/vh适配视口，em保持嵌套比例；CSS变量提升可维护性。
用相对单位（如 rem、em、%、vw/vh）替代固定像素（px），是解决不同设备间距不统一最直接有效的方式。核心在于建立可伸缩的基准，让间距随屏幕或根字体变化而等比缩放。
设置统一的根字体基准（rem 的基础）
rem 依赖于 html 元素的字体大小。为实现响应式缩放，可结合视口宽度动态调整根字号：
- 用 JS 监听
resize或使用vh+ 媒体查询控制初始值，例如：
html { font-size: clamp(14px, 2.5vw, 18px); } - 更轻量的做法：按设计稿宽度（如 375px）设定基准，如 html { font-size: 100px; }，再按比例换算 —— 1rem = 100px，那么 16px 就写成 0.16rem
- 所有外边距（margin）、内边距（padding）、行高（line-height）等统一用 rem，避免混用 px
用 vw/vh 实现真正视口级缩放
当需要间距严格跟随屏幕宽高变化（比如全屏 banner 的上下留白），vw/vh 更直观：
- padding: 5vh 2vw; 表示垂直方向留白为视口高度的 5%，水平为宽度的 2%
- 注意：小屏下
1vw可能过小（如 iPhone SE 宽 320px → 1vw = 3.2px），建议搭配min()或媒体查询兜底，例如：
margin-top: max(16px, 3vw);
组件内用 em 保持局部比例一致性
em 相对于父元素字体大小，在嵌套组件中能维持内部间距比例不变：
立即学习“前端免费学习笔记（深入）”；
- 按钮内 icon 和文字间距用 margin-left: 0.5em;，即使按钮字体放大，间距自动等比增大
- 避免在深层嵌套中连续使用 em（易叠加失真），优先用于直接子元素与父级的相对关系
配合 CSS 自定义属性提升可维护性
把常用间距抽象为 CSS 变量，便于全局调控和主题切换：
- 在 :root 中定义：
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem; - 组件中直接调用：
padding: var(--space-md) var(--space-lg); - 媒体查询中一键调整整套间距：
@media (max-width: 768px) { :root { --space-md: 0.75rem; } }
