本文详解如何通过为表单输入元素设置百分比宽度并优化css媒体查询，解决gpa计算器在智能手机上水平溢出、需横向滚动的问题，实现上下两表均完美适配小屏幕。

本文详解如何通过为表单输入元素设置百分比宽度并优化css媒体查询，解决gpa计算器在智能手机上水平溢出、需横向滚动的问题，实现上下两表均完美适配小屏幕。

在当前的HTML代码中，上部输入表格（#courseTable）在移动设备上出现水平滚动，根本原因在于 和 元素默认具有固定宽度（如浏览器默认的 130px–200px），且未设置响应式约束。即使父级 已随媒体查询缩放，内部表单控件仍按自身固有尺寸渲染，导致内容区域超出容器边界。

要彻底解决该问题，关键在于将所有可编辑控件（

和 ）的宽度设为相对单位（如百分比），使其严格继承父

的动态宽度。以下是完整、可直接集成的优化方案：

✅ 步骤一：为表单控件添加语义化类名

修改 HTML 中所有输入控件，统一添加 class="form-control"（比 .input 更具语义）：

<!-- 在 courseTable 的每一行中修改如下 -->
<td><input type="text" class="form-control" required></td>
<td><input type="number" value="1" min="1" class="form-control" required></td>
<td>
  <select class="form-control"><option value="4.0">A</option>
<option value="3.7">A-</option>
<!-- 其他选项保持不变 --></select>
</td>

⚠️ 注意： 不需要设宽，但需确保其父 内容对齐合理（见下文CSS增强）。

✅ 步骤二：增强 CSS 响应式控制

在原有

/* 基础表单控件样式 —— 适用于所有屏幕 */
.form-control {
  width: 100%;
  box-sizing: border-box; /* 关键：确保 padding/border 不撑大宽度 */
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0;
}

/* 移动端专属优化（补充原 @media 规则） */
@media (max-width: 768px) {
  .calculator-container {
    padding: 12px;
    max-width: 95%;
  }

  table {
    font-size: 13px;
  }

  th, td {
    padding: 6px 4px;
  }

  /* 强制表格单元格最小宽度不破坏布局 */
  td {
    min-width: 80px; /* 防止过窄导致文字挤压 */
  }

  /* 为“Remove”按钮单独优化 */
  td button[type="button"] {
    padding: 4px 8px;
    font-size: 12px;
    width: auto;
  }

  /* 隐藏冗余空列（原第4列为空td）提升移动端简洁性 */
  table#courseTable td:nth-child(4) {
    display: none;
  }
}

✅ 步骤三：微调 JavaScript（可选但推荐）

为避免新增行时控件未继承样式，可在 addCourse() 函数中显式添加类名：

function addCourse() {
  const newRow = document.createElement("tr");
  newRow.innerHTML = `
    <td><input type="text" class="form-control" required></td>
    <td><input type="number" value="1" min="1" class="form-control" required></td>
    <td>
      <select class="form-control"><option value="4.0">A</option>
<option value="3.7">A-</option>
<!-- ...其余选项 --></select>
</td>
    <td><button type="button" onclick="removeCourse(this.parentNode.parentNode)" class="form-control">Remove</button></td>
  `;
  courseTable.appendChild(newRow);
}

? 提示：

加 form-control 类仅用于复用 box-sizing 和 padding，实际无需 width:100%，因此建议为其单独重置 width: auto（见上方CSS中 td button[type="button"] 规则）。

? 验证与注意事项

• ✅ 测试要点：在 Chrome DevTools 中切换 iPhone SE / iPhone 12 等设备预览，确认无水平滚动条，所有输入框紧密贴合单元格边缘；
• ⚠️ 避坑提醒：
  • 切勿使用 width: 100% + padding 而不设 box-sizing: border-box，否则实际宽度 = 100% + padding × 2 → 溢出；
  • 在部分安卓浏览器中可能忽略 width:100%，box-sizing 和 display: block 可强化兼容性（本方案已覆盖）；
  • 若后续需支持更多课程行，建议为 #courseTable 添加 overflow-x: auto 作为兜底（但本优化后通常无需）。

通过以上三步改造，你的GPA计算器将真正实现「一码适配全端」：PC端保持清晰布局，手机端输入区域自动收缩、触控友好、无需横向滑动——既符合现代Web开发规范，也显著提升用户操作体验。