必须用box-sizing: border-box，因为content-box下padding、border与百分比宽度组合会导致断点内列宽超限、换行及表单溢出；border-box将内边距和边框纳入宽度计算，确保width: 50%等声明在各断点下始终精准占位，使媒体查询真正只控制布局结构而非像素算术。
为什么响应式断点里box-sizing必须是border-box
因为断点切换时，padding、border、百分比宽度的组合在content-box下会直接导致列宽超限、卡片换行、表单撑破容器——这不是媒体查询写错了，而是盒模型计算逻辑在不同尺寸下“突然暴露”。border-box让所有尺寸始终可预测，断点才真正只控制布局结构，不牵扯像素级算术。
media query中加padding却没溢出，靠的是什么
靠的是box-sizing: border-box把padding“锁”在设定宽度内。比如一个width: 50%的网格项，在max-width: 768px断点里加padding: 1rem，若没设border-box，实际宽度≈50% + 2×1rem，很可能突破父容器导致换行；设了之后，内容区自动收缩，总宽稳稳卡在50%。
- 别只在断点里改
padding，先确保全局* { box-sizing: border-box; }已生效 - 如果断点里用
max-width限制容器，记得给它也配box-sizing: border-box，否则左右padding仍会外溢 -
border-box对rem/em单位同样有效，但注意根字体大小变化时，padding实际像素值会变，而总宽占比不变
flex/grid响应式切换时box-sizing失效的典型场景
不是box-sizing失效，而是你忘了它只管单个元素的宽高计算，不管父容器是否“撑开”。常见坑：
- 父容器
display: flex且未设flex-wrap: wrap，子项width: 33.333%+padding→ 即使border-box也救不了，总和超100%就必然溢出 - 子项用了
min-width: 200px，断点缩小后，该值可能大于33.333%，此时border-box再准也没用，宽度由min-width主导 - 嵌套flex容器里，内层子项设了
width: 100%，但外层没设box-sizing: border-box，外层padding仍会让内层100%超出
移动端断点中input宽度溢出键盘的根源
不是width: 100%写错了，是input默认box-sizing: content-box，加上浏览器自带padding（如Chrome约4px）和border（1px），实际宽度轻松超100%。iOS Safari尤其明显，虚拟键盘弹出时视口压缩，这点额外像素就成了溢出导火索。
- 必须重置
input, textarea { box-sizing: border-box; }，不能只靠全局*——某些框架或重置CSS会覆盖它 - 配合
max-width: 100%和width: 100%双保险，防极端缩放 - 别信“移动端不用设border-box”，恰恰相反，小屏对像素误差更敏感，差2px就可能触发横向滚动条
真正容易被忽略的是：box-sizing解决的是“尺寸归属问题”，不是“空间分配问题”。断点里它能保你每个盒子的宽高不意外膨胀，但撑不撑破容器，还得看flex-shrink、grid-template-columns、min/max-width这些规则是否协同。单靠一句border-box，救不了没规划的响应式结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
