先检查viewport元标签是否缺失，否则所有响应式css失效；再确保input/textarea设width:100%、box-sizing:border-box及父容器为block或flex布局。
表单元素宽度不随屏幕变小？先检查 viewport 元标签
没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有响应式 CSS 都白写。移动端浏览器默认按 980px 宽度渲染页面，width: 100% 会撑满这个虚拟视口，而不是真实屏幕宽度。
这个标签必须放在 里，且不能重复或被 JS 动态移除。常见错误是复制粘贴时漏掉引号、拼错 content 值，或者误写成 initial-scale=0.1 导致文字小到看不见。
- 检查浏览器开发者工具的
Elements面板，确认该标签存在且位置正确 - 在手机上打开页面后双指缩放能放大，说明
viewport没生效 - 不要用
user-scalable=no—— 它会破坏可访问性，也常被 iOS Safari 忽略
input 和 textarea 的宽度为什么总“撑破”容器？
默认情况下，<input> 和 <textarea></textarea> 是 inline 元素，且有内置最小宽度（比如 Chrome 对 type="text" 设了约 120px 最小宽）。直接写 width: 100% 往往无效，因为父容器没设宽，或盒模型没重置。
真正起效的写法是：
.form-group input,
.form-group textarea {
width: 100%;
box-sizing: border-box; /* 关键：把 padding 和 border 算进 width 里 */
max-width: 100%; /* 防止内容过长时溢出 */
}
- 务必给父容器（如
.form-group）设display: block或flex，否则width: 100%无参照 - 避免用
min-width固定像素值，它会在小屏上强制横向滚动 -
textarea还要加resize: vertical，禁用水平拉伸，防止用户拖出超宽框
怎么让两个输入框在桌面并排、手机堆叠？用 flex 别用 float
过去用 float 清除浮动太容易出错，现在统一用 Flexbox。核心不是“怎么写”，而是“在哪一层设 display: flex”。
推荐结构：
<div class="form-row"> <div class="form-group"> <label>姓名</label><input> </div> <div class="form-group"> <label>电话</label><input> </div> </div>
CSS：
.form-row {
display: flex;
flex-wrap: wrap; /* 小屏自动换行 */
gap: 1rem; /* 间距统一，比 margin 更可靠 */
}
.form-group {
flex: 1 1 240px; /* 至少 240px 宽，超出则等分 */
}
@media (max-width: 768px) {
.form-group {
flex: 1 1 100%; /* 小屏占满整行 */
}
}
-
flex: 1 1 240px比flex: 1更可控：它表示“可伸缩、可收缩、基准宽 240px”，避免在窄屏下被压成一条线 - 别对
input本身设flex，它不是 flex 容器的直系子项，控制权在.form-group -
gap在 Safari 旧版本需加-webkit-gap前缀，但 iOS 14.5+ 已原生支持
表格型表单（如多选/地址字段）怎么响应式？别硬套 table 标签
用 <table> 包裹表单字段是反模式。语义错误、可访问性差、媒体查询难写。真正需要“行列对齐”的场景，用 CSS Grid 更干净。<p>例如地址字段含省、市、区三级下拉：</p>
<pre class="brush:php;toolbar:false;"><div class="address-grid">
<select name="province"></select><select name="city"></select><select name="district"></select>
</div></pre>
<pre class="brush:php;toolbar:false;">.address-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
}
@media (max-width: 480px) {
.address-grid {
grid-template-columns: 1fr;
}
}</pre>
<ul>
<li>Grid 的列数切换比 Flexbox 的换行更精准，尤其适合固定字段数的布局</li>
<li>避免用 <code>colspan 或 rowspan，它们会让响应式逻辑变得不可维护
<table>（比如后台数据报表），就用 <code>display: block + overflow-x: auto 包一层，而不是改表结构响应式表单最难的不是写 CSS，而是判断哪些字段真需要并排、哪些必须垂直——这取决于用户操作路径，而不是设计师的网格偏好。一个被忽略的细节：iOS 上 input[type="date"] 默认高度比文本框高，box-sizing: border-box 要单独加，否则对不齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
