移动端表单输入框需用百分比宽度、box-sizing: border-box及语义化布局重构，配合Flexbox响应式流向、44px最小高度、语义type与autocomplete，并对表格型表单做table-layout和媒体查询适配。
让表单输入框在移动端真正“贴手可用”，关键不是简单缩放，而是重构布局逻辑和控制尺寸来源。固定像素宽的 input 在小屏上必然溢出，必须用相对单位接管宽度，并配合容器行为做整体协调。
输入框宽度必须用百分比而非像素
浏览器对 <input> 和 <select> 默认设了 130–200px 的最小宽度，这在手机上直接撑破容器。解决办法是统一加语义类（如 class="form-control"），并在 CSS 中强制：
- 设置
width: 100%，使其严格继承父<td>或<div>的动态宽度 - 加上
box-sizing: border-box，避免 padding 和 border 额外撑大尺寸 - 移除所有硬编码的
style="width: 150px"或内联 width 值
用 Flexbox 控制整体流向，而不是依赖表格
原生表格在移动端极易横向溢出，尤其多列时。更可靠的方式是把表单项改用语义化 <div class="form-group"> 包裹，再用 Flexbox 管理：
- 小屏默认
flex-direction: column，每个字段独占一行 - 中屏（如平板）用媒体查询切到
flex-direction: row，让姓名+电话等成对并排 - 配合
flex-wrap: wrap，防止内容过长时换行错乱
提升触控友好性，不只是视觉适配
自适应不仅是“看起来不溢出”，更是“点得准、输得顺”：
立即学习“前端免费学习笔记（深入）”；
- 输入框最小高度设为
44px（苹果人机指南推荐），增大点击热区 - 标签始终放在输入框上方，不用
float或绝对定位，避免缩放遮挡 - 用
type="email"、type="tel"等语义类型，自动唤起对应软键盘 - 关键字段加
autocomplete属性（如autocomplete="email"），复用系统填写记录
表格型表单需额外处理单元格行为
如果必须保留表格结构（比如 GPA 计算器的课程录入表），不能只调 input 宽度：
- 给
<table>加width: 100%和table-layout: auto（避免fixed锁死列宽） - 每列
<td>设置max-width: none，允许内部 100% 宽的控件自由伸缩 - 必要时用
@media (max-width: 480px)把整行<tr>改为display: block，再把每个<td>设为display: block垂直堆叠
