最直接的解法是将所有间距属性统一改为rem，并通过calc(100vw / 分母)动态设置根字体大小，使1rem始终占视口宽度固定比例；需同步处理gap、line-height等隐式间距，避免混用px导致比例失衡。
用 rem + 根字体动态缩放统一间距比例
响应式中 px 间距在小屏上显得拥挤、大屏上又太空，本质是固定像素值无法随视口缩放。最直接的解法是把所有间距（margin、padding、gap）换成 rem，再让 html 根元素的 font-size 随屏幕宽度线性变化。
关键不是“设一个固定 rem 值”，而是让 1rem 的物理尺寸始终占视口宽度的固定比例（比如 1%），这样所有 rem 间距就自动等比缩放。
:root {
font-size: calc(100vw / 100); /* 1rem = 1% of viewport width */
}
/* 此时 1rem ≈ 3.75px (375px 屏) → 7.68px (768px 屏) → 12px (1200px 屏) */实际项目中常微调分母（如 37.5 或 100）来匹配设计稿基准（如 375px 宽对应 1rem=10px），但核心逻辑不变：根字号必须是 calc() 动态计算，不能写死。
避免用 % 替代 rem 做间距
% 是相对于父容器宽/高的，用在 margin 或 padding 上会导致横向/纵向比例失衡——比如 padding: 2% 在窄屏下可能只有 4px，宽屏下却达 24px，且上下左右都按同一百分比算，破坏视觉节奏。
立即学习“前端免费学习笔记（深入）”；
-
%适合做容器宽度或背景图定位，不适合控制组件内边距、元素间间隙 -
em依赖父级字体大小，嵌套深时容易失控，不如rem可预测 - 如果必须用
%，只用于max-width或flex-basis这类布局属性，避开间距类 CSS
媒体查询只是兜底，不是主方案
有人习惯写一堆 @media 给不同断点设不同 px 间距，这会迅速膨胀出大量重复样式，且无法覆盖所有设备宽度（比如 390px、412px、428px 等新机型）。媒体查询该用在「结构切换」上（如 flex 换成 grid、隐藏侧边栏），而不是微调 padding: 12px → 16px → 20px。
真正需要媒体查询兜底的，只有两类情况：
- 根字号
font-size的极值限制（防太小看不清，或太大撑破布局） - 某些间距在超小屏下必须归零（如手机端移除
sidebar的margin-right）
@media (max-width: 320px) {
:root { font-size: 10px; } /* 下限 */
}
@media (min-width: 1440px) {
:root { font-size: 16px; } /* 上限 */
}注意 gap、line-height 等隐式间距也要同步 rem 化
很多人改了 padding 和 margin 就以为完事，但 gap（Flex/Grid 间隙）、line-height、letter-spacing 同样影响视觉密度。它们若仍用 px，会在缩放后与其他间距脱节。
例如：gap: 16px 在 375px 屏上是合理间距，但在 1200px 屏上就显得单薄；而 gap: 1.6rem 则保持比例一致。
- 所有显式间距属性（
margin/padding/gap/border-radius）统一用rem - 文字相关间距（
line-height、letter-spacing）优先用无单位数值或em，避免和根字号耦合过紧 - 慎用
vh/vmax做间距——它们响应的是视口高度，滚动时可能造成意外跳动
实际最难的不是换单位，是说服设计师接受「间距不是固定像素，而是一组可伸缩的比例关系」。一旦接受这点，后续所有断点适配就变成数学问题，而不是反复调试。
