使用百分比、flex布局和max-width控制输入框宽度，结合媒体查询适配不同屏幕，确保表单自适应并提升用户体验。
在做响应式表单时，输入框的宽度控制非常关键。页面在不同设备上显示时，表单需要自动调整布局和尺寸，保证用户能方便地输入内容。核心思路是让表单容器自适应，同时合理设置输入框的宽度。
使用百分比或 flex 控制输入框宽度
直接给 input 设置固定像素宽度在移动端会出问题。推荐用相对单位：
- 百分比布局：让输入框占满父容器的一定比例，比如 width: 100%；注意加上 box-sizing: border-box，避免 padding 影响实际宽度。
- flex 布局：把表单字段放在 flex 容器中，输入框用 flex: 1，可以自动填充剩余空间，适合一行多个输入框的场景，如搜索栏+按钮。
媒体查询适配不同屏幕
在小屏幕上，通常让每个输入框独占一行；大屏幕上可并排显示。例如：
@media (max-width: 768px) {input { width: 100%; }
}
@media (min-width: 769px) {
.form-row { display: flex; }
.form-field { flex: 1; margin: 0 10px; }
}
限制最大宽度防止过度拉伸
虽然用 100% 很好，但在大屏上输入框太宽也不美观。可以结合 max-width 控制：
立即学习“前端免费学习笔记（深入）”；
- 设置 max-width: 400px；让输入框在小屏上撑满，大屏上最多到 400px。
- 配合 margin: 0 auto；居中显示，视觉更舒适。
基本上就这些。关键是灵活使用百分比、flex 和 max-width，再通过媒体查询微调，就能做出体验不错的响应式表单。不复杂但容易忽略细节。
