直接给 form 设 display: grid 会错乱，因语义结构被扁平化导致 label/input 脱离逻辑单元；应让每个 .field 独立设 grid，并确保 input width: 100%、min-width: 0、box-sizing: border-box，避免 fixed 定位，用 scrollIntoView 处理键盘遮挡。
为什么直接给 form 设 display: grid 会错乱
常见做法是把整个表单容器设成 display: grid，再用 grid-template-columns: max-content 1fr 对齐 label 和 input，结果所有 label 挤进第一列、所有 input 堆在第二列。这导致：Tab 键顺序断裂、屏幕阅读器无法识别配对关系、label[for] 失效。根本原因是语义结构被扁平化——label 和 input 不再属于同一逻辑单元，网格只按 DOM 顺序“摊开”，不按语义分组。
每个 .field 独立启用 display: grid 才可靠
正确方式是让每组表单项（比如一个 label + 一个 input）自己构成一个网格容器：
.field { display: grid; grid-template-columns: max-content 1fr; gap: 8px; }-
.field label默认左对齐；如需右对齐，用justify-self: end，不是text-align: right（后者会拉伸 label 宽度，干扰列轨道） -
.field input必须加min-width: 0，否则长 label 会把它撑窄甚至换行 - 小屏切换时，仅改
grid-template-columns: 1fr不够，还要同步重置定位：@media (max-width: 768px) { .field label, .field input { grid-column: 1; justify-self: start; } }
输入框自身宽度必须随容器收缩，不能写死像素值
多数小屏截断问题出在输入框设了 width: 300px 或继承了框架的 min-width。iPhone SE 视口只有 375px，加上 padding 和 margin 后极易触发横向滚动条。
- 所有
input、select、textarea必须设width: 100% - 父容器（如
.field）要确保有明确宽度上下文，例如max-width: 100%或嵌套在 flex/grid 中 - 统一加
box-sizing: border-box，否则padding和border会让实际宽度超 100% - 检查是否意外继承了 UI 框架的
min-width（比如 Bulma 的.input类），显式覆盖为min-width: 0
键盘弹出时输入框被遮挡怎么办
移动端键盘弹出会推高视口，如果 input 用了 position: fixed 或位于底部且未留白，就会被盖住。这不是布局问题，而是滚动行为没适配。
- 避免对表单控件使用
position: fixed或absolute定位 - 让表单自然流式布局，依赖浏览器默认滚动
- 聚焦时调用
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })，比监听resize更可靠 - 不要用 JS 检测窗口高度变化来 hack——它无法响应键盘收起、横竖屏切换等实时状态
真正难的不是写多少媒体查询，而是守住两个边界：语义结构不被 layout 属性破坏，尺寸控制不依赖设备像素硬编码。一旦 label 和 input 脱离父子关系，或输入框宽度脱离容器约束，后续所有响应式调整都会变成补丁叠补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
