手机端表单优化核心是提升拇指点击准确率，需设420px断点、标签顶部堆叠、点击热区不小于44×44px、统一间距变量控制。
手机端表单难操作，核心往往不是功能多复杂，而是控件挤、标签遮挡、点击区域太小、上下滑动错乱。用媒体查询针对性调整间距和标签布局，是最直接有效的解法。
缩小断点，优先适配主流小屏
别只盯着 768px 或 992px 做响应。很多现代手机屏幕宽度实际是 360px–414px（如 iPhone SE 到 iPhone 14 Pro Max），建议把关键断点设在 480px 或更保守的 420px：
- 用
@media (max-width: 420px)覆盖绝大多数竖屏手机 - 避免嵌套多层媒体查询，先保小屏可用，再向上增强
- 在 DevTools 中用“设备模拟”反复切 iPhone/Android 主流型号验证
标签从左侧移至顶部，释放横向空间
手机竖屏时，左对齐标签+输入框并排会严重挤压输入区域，还容易误触。媒体查询中统一改为顶部堆叠：
- 原样式：
display: flex; align-items: center;→ 改为flex-direction: column; text-align: left; - 给
label加margin-bottom: 0.5rem;，输入框加width: 100%; - 复选框/单选按钮保持左对齐但加大右侧间距：
margin-right: 0.75rem;
增大可点击区域，不只放大字体
用户点不准，常因点击热区（hit area）小于 44×44px 推荐最小值。光调 font-size 不够，要整体扩大交互区域：
立即学习“前端免费学习笔记（深入）”；
- 输入框：加
padding: 0.75rem 1rem;（内边距撑开热区） - 按钮：确保
min-height: 44px;+padding: 0.75rem 1.5rem; - 下拉/日期选择器：用
::after伪元素在右侧加三角图标，并扩展其点击范围
简化间距层级，避免嵌套外边距塌陷
表单字段多时，margin-bottom 层层叠加易导致空白过大或错位。改用统一的间距单位和 CSS 自定义属性控制：
- 定义
:root { --form-spacing: 1.25rem; } - 每个表单项（
.form-group）用margin-bottom: var(--form-spacing); - 禁用子元素的
margin-top，只靠父级统一控制节奏
基本上就这些。不复杂但容易忽略——关键是把“用户拇指能稳稳点中”当作第一设计指标，而不是视觉还原度。
