必须清零 body 默认边距并重置盒模型，用 rem 配合媒体查询分档控制外边距， viewport meta 标签不可遗漏，flex gap 比 margin 更适合子元素间距且需注意 IE 兼容性。
body 默认边距必须先清零
几乎所有浏览器都会给 body 加默认 margin（通常是 8px），不处理它，后续所有自适应设置都会偏移。直接写 body { margin: 0; } 是底线操作，别跳过。
更稳妥的做法是连同 padding 和盒模型一起重置：
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}注意：用通配符 * 重置要小心，可能影响 button、input 等原生控件的默认间距，建议只对布局容器类（如 .wrapper）单独设 box-sizing。
用 rem + 媒体查询做分档响应式外边距
固定像素（如 20px）在小屏上会撑满甚至溢出，用 rem 配合媒体查询才是可控方案。关键不是“全屏适配”，而是按设备宽度分档控制。
立即学习“前端免费学习笔记（深入）”；
-
html根字体大小设为基准：比如font-size: 16px（默认），小屏可下调 - 在
body或主容器上用margin，值用rem表达 - 用
@media切换不同档位的margin值，而不是靠 JS 动态计算
示例：
@media (max-width: 480px) {
body {
margin: 0.5rem;
}
}
@media (min-width: 481px) and (max-width: 768px) {
body {
margin: 1rem;
}
}
@media (min-width: 769px) {
body {
margin: 1.5rem;
}
}viewport meta 标签漏掉就白调
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端的媒体查询根本不会触发——浏览器会以桌面视口渲染，max-width: 480px 这类规则形同虚设。
这个标签必须放在 <head> 最前面，且不能写错属性名（比如写成 viewport-width 就无效）。
常见错误：
– 忘了加，尤其在快速原型时
– 写成 initial-scale=0.5 导致内容缩得太小
– 在 Vue/React 项目里误删了模板中已有的该标签
flex gap 比 margin 更适合子元素间距
如果你真正想控制的是“页面内多个区块之间的间距”，比如几个 <section> 并列排列，用 margin 容易引发外边距塌陷（margin-collapse），而且响应式切换麻烦。
改用 display: flex + gap 更干净：
.container {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
@media (min-width: 769px) {
.container {
flex-direction: row;
gap: 2rem;
}
}gap 不受塌陷影响，也不需要额外清除浮动或触发 BFC；但注意 IE 不支持，如果需兼容旧版，仍得回退到 margin + :first-child/:last-child 排除逻辑。
真正难的不是写几行媒体查询，而是决定“哪些边距必须随屏幕变化”——比如侧边栏宽度、卡片间距、页脚离底部距离，这些往往比顶部 body margin 更值得动态调整。别一上来就给所有 margin 加 rem，先盯住核心布局断点。
