表单在小屏截断错位的根源是输入框默认 min-width 干扰 flex 布局，须设 min-width: 0 并配合 box-sizing: border-box、width: 100%、合理 media query 与 viewport 元标签。
为什么表单在小屏上总被截断或错位？
根本不是媒体查询没生效，而是输入框本身没“听话”：默认情况下 input 在 iOS Safari 里有约 120px 的隐式最小宽度，width: 100% 也压不住它；Chrome 里则可能忽略 max-width。结果就是 flex 容器里它硬撑着不换行，父容器又被 padding 撑爆——视觉上就重叠、滚动或截断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有表单控件（
input、select、textarea）必须加min-width: 0，这是让flex-basis或width生效的前提 - 父容器设
box-sizing: border-box+ 显式width: 100%，避免 padding 导致实际宽度超标 - 别对
input直接写flex: 1，应套一层div做 flex 项，input只负责width: 100%
用 @media (max-width: 480px) 做什么最有效？
这个断点不是为了“改颜色”，而是重置布局逻辑：手机竖屏下，用户手指操作优先，一切字段必须垂直堆叠、点击区域够大、标签和输入框对齐无偏差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
.form-field统一设flex: 0 0 100%或grid-column: 1 / -1，强制单列 -
input高度至少44px，字体不小于16px，满足触控目标建议尺寸 - 移除所有固定
px宽度（如width: 300px），改用width: 100%+max-width: 400px控制上限 - 用
gap替代margin控制间距，避免 margin 折叠导致的错位
flex-wrap: wrap 在表单里为什么像没写？
不是 CSS 失效，是浏览器对表单控件的渲染规则盖过了 flex 行为。比如 input[type="text"] 在 Safari 中会无视 max-width，除非你显式告诉它：width: 100% 且 min-width: 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.form-row设display: flex+flex-wrap: wrap+gap: 12px - 子项用
flex: 0 0 calc(50% - 6px)实现两列（注意calc()里的减法要和gap匹配） - 小屏下通过媒体查询把子项改成
flex: 0 0 100%，比依赖flex-wrap换行更可控 - 若用了
-webkit-appearance: none，务必重置padding和border，否则盒模型计算会出偏
键盘弹起时表单被遮住，媒体查询能解决吗？
不能。这是 WebView / Safari 的 viewport 缩放行为问题，和 CSS 布局无关。媒体查询查不到软键盘高度，flex-wrap 更无能为力。
轻量级应对方式：
- 给每个
input绑focus事件，调用scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 避免在底部放长表单——键盘弹起后 viewport height 缩水，再好的 CSS 也撑不住
- iOS 上慎用
position: fixed表单容器，它常与键盘冲突导致定位失效
真正容易被忽略的点是：所有响应式表单的起点不是写媒体查询，而是先加 <meta name="viewport" content="width=device-width, initial-scale=1.0">。没它，@media 规则大概率不会触发。
