使用百分比宽度、flex布局和媒体查询可实现输入框自适应；设置max-width防止过宽，并通过@media优化小屏体验，结合flex-wrap实现多列响应式换行，确保表单在不同设备均良好显示。
要让CSS中的表单输入框在不同屏幕尺寸下自适应，关键在于使用响应式设计技巧，结合百分比宽度、flex布局和媒体查询。下面是一些实用方法：
1. 使用百分比宽度或 flex 布局
将输入框的宽度设置为父容器的百分比，或者使用 flex 让其自动填充可用空间。
示例：.form-group {
display: flex;
}
<p>.input-field {
width: 100%; /<em> 占满父容器 </em>/
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
这样无论父容器多宽，输入框都会自动伸缩。
2. 设置最大宽度避免过宽
在大屏幕上，输入框可能太宽影响美观。可以设置 max-width 来限制最大宽度。
立即学习“前端免费学习笔记（深入）”；
CSS 示例：.input-field {
width: 100%;
max-width: 400px; /* 最宽不超过400px */
margin: 0 auto; /* 居中显示（可选） */
}
3. 配合媒体查询优化不同设备
针对手机、平板等小屏幕，可以调整内边距、字体大小等，提升体验。
@media (max-width: 768px) {
.input-field {
font-size: 16px;
padding: 12px;
}
}
4. 使用 CSS Grid 或 Flex 布局实现复杂表单
当表单有多列输入项时，用 flex-wrap 实现换行自适应。
HTML 结构：<code><div class="form-row"> <input type="text" placeholder="名字" class="input-field"> <input type="email" placeholder="邮箱" class="input-field"> </div>
CSS 样式：
.form-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
<p>.input-field {
flex: 1 1 200px; /<em> 最小200px，可扩展 </em>/
}
这样在窄屏下会自动换行，每行尽可能放一个或多个输入框。
基本上就这些。关键是让宽度灵活、限制最大尺寸，并在小屏幕上做视觉优化。不复杂但容易忽略细节。
