响应式布局需设box-sizing: border-box全局重置，图片等媒体须加max-width: 100%和height: auto，间距推荐rem或clamp()，flex/grid子项注意min-width: 0防换行失效。

box-sizing: border-box 是响应式布局的起点

不设 box-sizing: border-box，用百分比或 rem 布局时，padding 和 border 会额外撑开元素宽度，导致换行、溢出或断点错位。这是响应式失效最隐蔽的根源之一。

• 全局重置推荐：

  *, *::before, *::after { box-sizing: border-box; }

• IE8+ 支持，无需前缀；但注意 Flex/Grid 子项默认已是 border-box，无需重复设置
• 若项目中混用第三方组件（如旧版 Bootstrap），需单独对 .col-* 类再声明一次，防止被覆盖

max-width + width: 100% 处理图片和媒体嵌入

响应式中图片拉伸、裁剪或溢出容器，往往不是因为没写 width: 100%，而是漏了 max-width: 100% —— 后者才是防止大图撑破小屏的关键。

• img, iframe, video, object 都应统一加：

  img, iframe, video, object { max-width: 100%; height: auto; }

• 仅设 width: 100% 会导致小图被强行拉宽失真；仅设 max-width: 100% 则小图保持原尺寸，不放大
• 若需等比缩放且居中，配合 object-fit: contain（注意 Safari 旧版本需加前缀）

margin/padding 用 rem 或 clamp() 替代固定 px

用 px 写内边距或外边距，在小屏上会显得过重，大屏上又太单薄。直接换 em 容易因嵌套继承失控，rem 更稳妥；而 clamp() 能实现平滑过渡。

• 基础字体设为 html { font-size: 16px; }，后续用 1rem = 16px 计算
• 响应式间距可写：

  section { padding: clamp(1rem, 2.5vw, 2rem); }

  —— 小屏取 1rem，大屏上限 2rem，中间按视口宽度线性插值
• 注意：clamp() 在 iOS Safari 13.4+、Chrome 88+ 才稳定支持；降级方案是用媒体查询 fallback

flex/grid 容器内子项的 min-width 破坏换行逻辑

Flex 容器设了 flex-wrap: wrap，但子项仍不换行？大概率是子项设置了 min-width（比如 min-width: 300px），在窄屏下无法压缩，强行挤出容器。

• 检查所有 flex-item 是否隐含 min-width: auto（这是浏览器默认值），但一旦设了 width、min-width 或 flex-basis，就可能锁死尺寸
• 安全写法：

  .card { flex: 1 1 calc(50% - 1rem); min-width: 0; }

  —— min-width: 0 允许内容收缩，避免文字溢出或强制换行失败
• Grid 布局同理：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 中的 280px 是最小轨道宽，若内容更小，需靠 min-width: 0 配合 overflow 控制

实际项目里，盒模型相关问题常藏在“看起来没问题”的地方：比如一个 padding: 1.5rem 在 iPhone SE 上占满半屏，却没人去查它是不是该用 clamp()；又比如 img 没加 max-width，只在用户上传高清图后才暴露。这些细节不报错，但会让响应式变成玄学。