响应式布局需设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，只在用户上传高清图后才暴露。这些细节不报错，但会让响应式变成玄学。
