使用百分比和rem单位结合可实现响应式表单输入框：宽度设为100%以适应父容器，通过max-width限制最大宽度（如30rem），防止大屏过度拉伸；采用rem定义字体大小、内边距（如0.75rem、1rem），确保文本可读性；配合flex或grid布局提升灵活性；同时设置html根字体大小，并在小屏媒体查询中调整（如768px以下设为14px），保持整体比例协调，实现跨设备良好显示。
要让表单输入框在不同设备上都能良好显示，结合百分比和 rem 单位是一种灵活且可维护的方案。百分比让输入框相对于父容器缩放，rem 确保字体和间距在不同屏幕下保持可读性。下面介绍如何有效结合两者实现响应式输入框。
使用百分比控制宽度，rem 控制内边距与字体
将输入框的宽度设为百分比，使其随父容器伸缩；同时用 rem 定义字体大小、内边距等，确保文本内容在各种设备上清晰易读。
示例：
input[type="text"] {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
这样，输入框始终填满父容器宽度，内边距和文字大小基于根字体（html 元素）调整，适配移动端和桌面端。
设置最大宽度防止过度拉伸
在大屏幕上，100% 宽度可能导致输入框过宽，影响美观和可用性。添加 max-width 限制其最大尺寸。
立即学习“前端免费学习笔记（深入）”；
建议做法：
input[type="text"] {
width: 100%;
max-width: 30rem;
padding: 0.75rem;
font-size: 1rem;
}
30rem 的最大宽度在桌面端看起来更集中，同时小屏设备仍能自适应收缩。
配合弹性布局或网格布局更灵活
在现代布局中，常将输入框放在 flex 或 grid 容器中，实现更复杂的响应式结构。
例如使用 Flexbox：
.form-group {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 0.75rem;
font-size: 1rem;
margin-right: 1rem;
}
此时输入框会自动填充剩余空间，配合 rem 单位依然保持良好的可读性和一致性。
注意根字体大小的设置
rem 的效果依赖于 html 根元素的字体大小。推荐在根元素设置一个响应式的基准值。
常见设置：
html {
font-size: 16px;
}
@media (max-width: 768px) {
html { font-size: 14px; }
}
这样在小屏幕上整体 rem 值略微缩小，界面更紧凑，但仍保持比例协调。
基本上就这些。合理使用百分比和 rem，既能保证布局弹性，又能维持视觉一致性，是构建响应式表单的关键技巧。不复杂但容易忽略细节。
