自适应布局宽度失控主因是盒模型理解偏差，应统一用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 子项溢出）