自适应布局宽度失控主因是盒模型理解偏差，应统一用box-sizing:border-box；配合max-width+width:100%、clamp()及父容器约束可有效解决。
自适应布局中宽度“失控”，往往不是媒体查询没写，而是盒模型理解不到位——padding、border 默认算在 width 之内，一加边框或内边距，元素就撑出容器，响应式立刻变形。
用 box-sizing: border-box 统一尺寸基准
这是最直接有效的解法。默认的 content-box 让 width 只管内容区，而 border-box 把 width 当作“整体占位宽度”，内边距和边框都往里挤，不溢出。
- 全局重置（推荐）：*, *::before, *::after { box-sizing: border-box; }
- 单独控制：给关键容器（如 .card、.input-wrapper）加 box-sizing: border-box;
- 注意：flex 或 grid 子项即使设了 border-box，仍受 flex-basis / grid-template 影响，需配合使用
用 max-width + width 配合流体缩放
纯百分比 width 在小屏下可能过窄，纯固定值又无法伸缩。用 max-width 设上限，width: 100% 保弹性，是最稳妥的组合。
- 示
例：width: 100%; max-width: 1200px; margin: 0 auto; —— 宽屏居中不超限，窄屏自动收缩
- 图片/视频建议加 max-width: 100%; height: auto; 防止溢出
- 避免对 flex 容器子项同时设 width 和 flex，易冲突；优先用 flex: 1 或 flex-basis
用 clamp() 实现平滑响应式宽度
不需要写多套 media query，clamp(min, preferred, max) 让宽度随视口连续变化。
- 例如：width: clamp(320px, 85%, 1440px); —— 最小320px，理想为视口85%，最大1440px
- 适合标题栏、卡片容器、表单区域等需要“有底线、有上限、中间柔韧”的场景
- 注意兼容性：现代浏览器支持良好，IE 不支持，需备选方案（如 fallback width + media query）
检查父容器是否“漏掉”宽度约束
子元素设了 width: 100%，但父级是 display: inline 或未设宽的 flex 容器，实际宽度会坍缩。常见于：
- nav、header 等语义标签默认 display: block，但若被 flex 容器包裹且未设 flex-basis，可能不占满
- 浮动父容器未清除，导致高度塌陷，进而影响子元素计算
- 解决方案：给父级明确 width / max-width，或用 flex: 1 / min-width: 0（防 flex 子项溢出）
例：width: 100%; max-width: 1200px; margin: 0 auto; —— 宽屏居中不超限，窄屏自动收缩