媒体查询是控制字号与边距响应式变化最直接、最可控的方式，需分段调控font-size、按方向分类处理margin/padding，并协同容器尺寸联动调整，clamp()仅适用于平滑过渡场景，不可替代媒体查询做布局切换。
媒体查询是控制字号与边距响应式变化最直接、最可控的方式。它不依赖JavaScript，兼容性好，逻辑清晰，适合大多数项目场景。
字号调整：用媒体查询分段控制 font-size
字号响应不能只靠单位替换（比如把px改成rem），必须配合根字号或元素自身字号的断点切换。
- 对标题等关键文本，直接在 h1/h2 上写媒体查询：
- 若用 rem 单位，建议统一调控 html 的 font-size，再让所有 rem 值自然缩放：
html { font-size: 16px; }
@media (max-width: 768px) { html { font-size: 14px; } }
@media (max-width: 480px) { html { font-size: 12px; } } 这样 padding: 1.25rem、margin: 0.75rem 等都会同步变小，维护成本低。 - 避免在多个选择器里重复写相同字号断点；优先提取为 CSS 自定义属性（如 --text-lg: 1.5rem），再配合媒体查询更新变量值。
边距调整：按容器层级和方向分类处理
边距响应的关键是“上下左右分开看，父子关系要理清”——尤其注意百分比在垂直方向的计算逻辑陷阱。
- 横向边距（margin-left/right、padding-left/right）可用百分比，因为按父宽计算更稳定： .btn { margin: 0 2%; } /* 小屏窄、大屏宽，呼吸感自然 */
- 纵向边距（margin-top/bottom、padding-top/bottom）慎用百分比，它也按父宽算，容易失真；推荐用 rem 或固定 vw：
.section { margin-top: 2rem; }
@media (max-width: 768px) { .section { margin-top: 1.5rem; } } - 按钮、卡片等独立块级元素，确保 display: block 或 display: flex 子项，否则 margin-top/bottom 可能失效（inline 元素受 IFC 限制）。
协同控制：字号 + 边距 + 容器尺寸三者联动
只调字号或只调边距，往往效果打折。比如标题变小了，但上下 margin 没缩，视觉节奏就乱了。
- 字号每降一级，对应 margin/padding 也应同步减量。例如： 桌面端 h2 font-size: 2rem → margin-bottom: 1.5rem； 移动端 h2 font-size: 1.4rem → margin-bottom: 1rem。
- 若容器本身用了 max-width 或 flex: 1，需同步检查子元素的 margin 是否被挤压；必要时加 min-width: 0 防止 flex 子项忽略 max-width 和 margin 行为。
- 图片内联按钮或带图标的文字按钮，图标尺寸若用 rem，要确认其父容器未重置 font-size，否则 rem 计算基准错位。
补充技巧：clamp() 可简化部分场景，但别替代媒体查询
clamp(1.2rem, 3vw, 2rem) 适合标题、行高、内边距这类需要平滑过渡的属性，但它无法替代媒体查询做布局结构切换（比如从横排变竖排、隐藏侧栏等）。
- 推荐组合用法：用 clamp() 控制字体和基础间距，用媒体查询控制结构与关键断点行为。
- 注意旧版 Safari 对 html 上的 clamp(font-size) 支持不稳定，生产环境建议仍以媒体查询设根字号为主。
- 避免在同一个属性上混用 clamp() 和媒体查询，容易造成样式覆盖难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
