表单容器应设 max-width 而非 width: 100%，推荐 max-width: 600px 配合 margin: 0 auto 居中；textarea 需 JS 动态适配高度，input 需统一 padding 和 line-height；.form-group 默认 flex-direction: column，横屏用 @media (min-width: 768px) and (orientation: landscape) 切换；所有控件 touch 目标不小于 44×44px。
表单容器必须设 max-width 而非 width: 100%
直接给 form 加 width: 100% 在多数布局中反而导致错位，尤其嵌套在 flex 或 grid 容器里时会撑满父级、失去留白。真正可控的做法是用 max-width 限定最大宽度，再配合居中和响应式缩放。
-
max-width: 600px是移动端到桌面端都较稳妥的值，超过该宽度也不再拉伸 - 搭配
margin: 0 auto实现水平居中，避免小屏下左右溢出 - 若父容器本身有 padding（如 Bootstrap 的
.container），max-width可设为100%，但必须加box-sizing: border-box
input 和 textarea 需要独立处理高度适配
textarea 默认不会随内容增高，input[type="text"] 也不能靠 height: auto 解决——CSS 无法感知文本行数，纯样式方案必然失效。
- 对
textarea：必须用 JS 监听input和paste，先设height: auto，再读取scrollHeight赋值（注意加setTimeout延迟处理粘贴） - 对
input[type="text"]：无需动态撑高，但需统一padding和line-height，避免不同浏览器渲染高度不一致 - 所有输入控件应设
box-sizing: border-box，否则padding会额外增加宽度，破坏 100% 布局
横竖屏切换时用 media query + flex-direction 控制流向
竖屏优先不是口号，而是实际交互逻辑：单手操作需要垂直堆叠，横屏才有足够空间并排。只靠 flex-wrap 不够，必须明确方向切换。
- 基础样式设
.form-group { display: flex; flex-direction: column; } - 横屏临界点建议用
@media (min-width: 768px) and (orientation: landscape)，而非仅靠宽度，避免 iPad 竖屏宽屏误判 - 并排时用
flex: 1分配宽度，但需限制最小宽度（如min-width: 240px），防止极端窄屏下压缩过甚 - 避免对
label和input同时设flex: 1，会导致 label 被挤压，应只让 input 占剩余空间
移动端点击区域必须 ≥ 44×44px
表单控件在触摸设备上如果太小，用户点不准，不是体验问题，是可访问性合规红线。iOS 和 Android 都要求最小触控目标为 44px，且不能仅靠 font-size 或 height 撑开。
立即学习“前端免费学习笔记（深入）”；
-
input和textarea的padding至少合计 16px（上下各 8px），加上默认border和line-height才能达到 44px 高度 - 不要依赖
zoom或transform: scale()，它们会模糊文字且不增加真实点击热区 - 如果用图标按钮（如清空 ×），需包裹在
span内并设display: inline-flex+ 显式min-width/min-height
