使用相对单位（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 更直观：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• 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; } }