本文详解如何修复原计算器中输入字段在移动端水平溢出的问题，核心是为表单控件设置相对宽度（百分比）并配合媒体查询优化布局，确保上下两张表格均能在小屏设备上完整、易用地显示。
本文详解如何修复原计算器中输入字段在移动端水平溢出的问题，核心是为表单控件设置相对宽度（百分比）并配合媒体查询优化布局，确保上下两张表格均能在小屏设备上完整、易用地显示。
在当前的 GPA 计算器实现中，尽管整体容器（.calculator-container）和表格（table）已通过 max-width 和 width: 100% 做了基础响应式处理，但关键问题在于：表单控件（ 和 。这导致在窄屏（尤其是手机竖屏）下，单行表格内容超出视口，触发不必要的水平滚动——而下方仅展示数据的“成绩表”因无交互控件，反而表现正常。
要根本解决此问题，需对所有用户可编辑的表单元素实施流体宽度控制，并辅以合理的垂直间距与触摸友好设计。以下是经过验证的完整优化方案：
✅ 关键修改：为输入控件添加响应式宽度
首先，在 HTML 中为所有输入控件添加语义化类名（便于统一管理）：
<!-- 在 courseTable 的 <tbody> 中，修改每一行的输入字段 --> <td><input type="text" class="form-input" required></td> <td><input type="number" value="1" min="1" class="form-input" required></td> <td> <select class="form-select"><!-- 选项保持不变 --></select> </td>
接着，在
/* 桌面端保持默认宽度（可选） */
.form-input,
.form-select {
width: 100%;
box-sizing: border-box; /* 确保 padding/border 不撑宽 */
margin: 0;
}
/* 移动端增强：缩小内边距 + 统一字体大小 */
@media (max-width: 768px) {
.form-input,
.form-select {
padding: 8px 10px; /* 更适合手指点击 */
font-size: 14px;
}
/* 防止 select 在 iOS 上过宽（部分旧版 Safari 需要） */
.form-select {
min-width: 80px;
}
/* 可选：为“Add Course”等按钮增加底部间距 */
#addCourseButton,
#calculateButton {
margin: 12px 0 8px;
}
}
? 为什么用 width: 100% 而非固定像素？
百分比宽度使控件始终占据其的全部可用空间；而 本身在 table { width: 100% } 下会随容器自适应。这形成完整的响应式链路——屏幕越窄，单元格越窄，输入框随之收缩，彻底消除横向溢出。 ✅ 进阶优化：提升移动端操作体验
- 移除冗余空白列：原表格末列
为空，却占用空间。建议删除或替换为带明确功能的图标列（如“删除”按钮），并为其设置 white-space: nowrap 防止换行破坏布局。 - 增强触摸目标尺寸：根据 WCAG 2.1 建议，确保可点击区域 ≥ 44×44px。上述 padding: 8px 10px 结合默认 font-size: 14px，已使多数输入框高度超过 44px。
- 动态调整行高：在移动端媒体查询中，可增加 line-height: 1.5 到 th, td，改善文字可读性。
✅ 完整验证示例（精简版 CSS 片段）
将以下代码插入原
/* 响应式表单控件基础样式 */ .form-input, .form-select { width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #ccc; border-radius: 4px; padding: 8px 10px; font-size: 14px; } @media (max-width: 768px) { .form-input, .form-select { padding: 10px; } /* 确保表格单元格不压缩内容 */ td { vertical-align: middle; } }⚠️ 注意事项
- 避免 !important：不要为 .form-input 添加 !important，否则可能干扰 JavaScript 动态样式（如焦点状态）。
- 测试真实设备：Chrome DevTools 的模拟器仅作参考，务必在真机（iOS Safari / Android Chrome）上验证滚动行为与点击精度。
- 兼容性兜底：如需支持 IE11，需额外添加 -ms-flex 相关前缀（但现代项目通常无需）。
通过以上修改，您的 GPA 计算器上半部分输入表格将与下半部分成绩表一样，在各类智能手机上实现真正的“一屏可见、无需横滑、触控友好”。响应式不是简单加个 viewport，而是从容器、表格、单元格到每一个输入框的逐层适配——这才是专业前端实践的核心逻辑。
