多列布局小屏换行主因是box-sizing未统一，需全局设、::before、*::after为border-box，并针对性覆盖表单控件及第三方库样式，同时注意flex/grid子项的min-width与calc()使用规范。
为什么多列布局在小屏上突然换行
不是媒体查询没生效，也不是flex或grid写错了，大概率是box-sizing没统一。默认box-sizing: content-box下，你写的width: 50%只算内容区，加上padding: 12px和border: 1px后，实际宽度变成50% + 24px + 2px，直接超父容器100%，浏览器只能折行。
必须全局重置box-sizing的写法
只写* { box-sizing: border-box; }不够，伪元素仍走content-box，会悄悄破坏::before清浮动或::after装饰图标的位置。正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这条规则要放在所有自定义样式之前，否则会被覆盖。别漏掉::before和::after——它们不是可选项，是常见翻车点。
多列容器与子项的box-sizing配合要点
即使全局设了border-box，以下情况仍会换行：
-
flex容器里子项写了flex-basis: 200px但没设min-width，小屏下内容收缩后触发换行 -
grid列定义为grid-template-columns: 1fr 300px，但子项是content-box且带大padding，撑破轨道 - 卡片类组件用了
width: calc(50% - 16px)又额外加padding: 16px，内容区被压窄两次
解决方法很直接：flex子项加min-width: 0；grid子项确保box-sizing: border-box已生效；calc()只用于外边距或间隙，别和padding重复抵扣。
移动端表单控件是最大漏网之鱼
iOS Safari 的input[type="text"]、textarea在某些版本里仍默认content-box，哪怕全局重置也无效。必须显式覆盖：
input, textarea, select, button {
box-sizing: border-box;
}
遇到第三方 UI 库（比如 Vant 或 NutUI）内部没设box-sizing，得用更具体选择器强制，例如.van-field__control { box-sizing: border-box; }。别指望它继承——box-sizing不继承，而且原生控件在不同内核中行为不一致。
真正容易被忽略的是：DevTools 的「Computed」面板里width值永远显示内容区宽度，哪怕元素已是border-box；而标尺高亮框显示的是总宽。这两个数本就不该相等——你得看「Computed」里的box-sizing是否为border-box，再对照标尺确认实际占位是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
