使用100%宽度和box-sizing:border-box确保输入框适配容器；2. 通过@media(max-width:768px)调整字体和间距提升可读性；3. 添加viewport元标签防止缩放问题；4. 设置最小高度44px并预留外边距优化触屏体验。
在小屏幕设备上优化表单输入框的显示效果，是响应式设计中的常见需求。核心目标是确保用户能方便地输入内容，同时保持布局美观。以下是一些实用的 CSS 方法来调整输入框在小屏幕上的表现。
使用百分比宽度适配容器
固定像素宽度在小屏幕上容易导致溢出或留白过多。设置输入框为父容器的百分比宽度，可以使其自动适应不同屏幕尺寸。
建议：将输入框宽度设为 100%，并预留内边距避免贴边。示例代码：
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
box-sizing: border-box; /* 包含 padding 和 border */
}
通过媒体查询精细控制
针对特定屏幕尺寸调整样式，比如在手机上减小字体、调整间距。
立即学习“前端免费学习笔记（深入）”；
常用断点：768px 以下是平板和手机范围。示例：
@media (max-width: 768px) {
input, textarea {
font-size: 16px; /* 提高可读性 */
margin-bottom: 12px; /* 增加垂直间距 */
}
}
避免缩放问题：设置 viewport
如果页面在移动端被缩放，输入框可能显示异常。确保 HTML 中包含正确的 viewport meta 标签。
必须在 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1">
优化触摸体验
小屏幕多为触屏操作，输入框应足够大，便于点击。
- 最小高度建议 44px，符合苹果人机指南推荐的可点击区域
- 上下留出足够外边距，防止误触
- 自动聚焦时不要遮挡输入框（注意移动端键盘弹起）
基本上就这些关键点。合理使用宽度自适应、媒体查询和 viewport 设置，就能让表单在手机上看起来自然又易用。
