如何使用CSS实现响应式表单布局_Flex/Grid结合应用

<div class="form-row">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" />
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" />
</div>
</div>

.form-row {
display: flex;
gap: 1rem;
}
<p>.form-group {
flex: 1;
}</p><p>.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}</p><p>.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
}</p><p>@media (max-width: 768px) {
.form-row {
flex-direction: column;
}
}</p>

<div class="form-grid">
<div class="section personal-info">
<h3>个人信息</h3>
<!-- 表单项 -->
</div>
<div class="section address">
<h3>地址信息</h3>
<!-- 表单项 -->
</div>
<div class="section preferences">
<h3>偏好设置</h3>
<!-- 表单项 -->
</div>
</div>

.form-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
<p>.section {
background-color: #f9f9f9;
padding: 1.5rem;
border-radius: 8px;
}</p><p>@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}</p>

<div class="address-fields">
<div class="form-group">
<label for="city">城市</label>
<input id="city" />
</div>
<div class="form-group">
<label for="zip">邮编</label>
<input id="zip" />
</div>
</div>

.address-fields {
display: flex;
gap: 1rem;
}
<p>.address-fields .form-group {
flex: 1;
}
</font></p></p><p>这样，Grid 控制整体分区，Flex 负责局部对齐，实现层次清晰、响应自然的布局。</p><H3>4. 注意细节提升用户体验</H3><p>响应式不只是布局变化，还需关注交互体验：</p><ul><li><strong>输入框高度一致</strong>：统一 padding 和 box-sizing，避免错位</li><li><strong>标签清晰可见</strong>：使用 block 显示，适当上下间距</li><li><strong>禁用自动缩放</strong>：移动端加入 <code><meta name="viewport"></code></li><li><strong>焦点状态反馈</strong>：添加 outline 或边框高亮</li></ul><p>示例：</p><font><pre class="brush:php;toolbar:false;">
input:focus {
outline: 2px solid #007bff;
border-color: #007bff;
}