移动端表单错位主因是固定宽度、浮动布局或视口未适配；应设正确viewport，用Flex布局替代float，分层Media Query响应（≤480px竖排、481–768px两列、≥769px水平对齐），并重置box-sizing与字体单位。
移动端表单错位，多数是因为固定宽度、浮动布局或未适配视口导致的。用 Flex 布局 + Media Query 是最稳妥的解法——不依赖 JS，语义清晰，兼容性好（iOS Safari / Android Chrome 都支持）。
确保 viewport 设置正确
这是前提，漏掉这步，后续所有 flex 调整都可能失效：
→ 在<head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
用 flex 重写表单容器结构
避免用 float 或 inline-block 排列 label 和 input，改用 flex 容器控制流向和换行：
立即学习“前端免费学习笔记（深入）”；
- 给表单外层（如
.form-group）设display: flex，方向为 column（竖排），适合小屏 - label 和 input 默认占满父容器宽度，不用写
width: 100%，靠flex: 1或min-width: 0防止溢出 - 需要左右对齐（如登录页的“记住我”+“忘记密码”）时，用
justify-content: space-between，但仅在 >= 480px 的断点启用
用 media query 分层响应
不要只写一个断点，按设备习惯分层处理：
-
≤ 480px（主流手机竖屏）：label 和 input 全部垂直堆叠，input 加
margin-top: 0.5rem隔开 -
481px – 768px（平板竖屏/大屏手机横屏）：两列简单表单（如姓名+电话）可设
flex-direction: row; flex-wrap: wrap，每项flex: 0 0 49% -
≥ 769px（桌面）：恢复常规水平对齐，label 固定宽 120px，input 自适应，用
align-items: center垂直居中
修复常见错位细节
这些小地方最容易被忽略，却直接导致错位：
- input、select、textarea 默认有浏览器内置 padding 和 border，统一重置：
box-sizing: border-box - 字体大小别用
px，改用rem或em，配合根字体缩放（html { font-size: 16px; }→@media (max-width: 480px) { html { font-size: 14px; } }） - 按钮如果用了
float: right，立刻删掉，换成margin-left: auto或justify-content: flex-end
