移动端label文字模糊或变大，需设font-size:16px且加-webkit-text-size-adjust:100%；label与input对不齐应改用flex column+align-items:flex-start；输入框需padding、font-size、box-sizing:border-box和min-height:44px；表单项间距推荐用gap而非margin。
label文字太小或被缩放怎么办
移动端 label 文字模糊、突然变大或被系统强制缩放，八成是因为 font-size 小于 16px，触发了 iOS Safari 的自动缩放保护机制。这不是 bug，是浏览器对可读性的硬约束。
必须给所有 label 显式设 font-size: 16px 或更大，并加 -webkit-text-size-adjust: 100% 禁用缩放：
label {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
- 别依赖父容器继承字体大小，
label可能被重置为更小值 - 避免用
rem或em计算后实际小于 16px，建议直接写死16px保底 - Android Chrome 虽不缩放，但统一设可避免跨端渲染差异
label 和 input 垂直堆叠时文字对不齐
常见现象是 label 文字顶部和 input 边框上沿不在一条线，尤其在加了 padding 或 line-height 后更明显。根本原因是默认基线（baseline）对齐方式不一致。
解决方法不是调 vertical-align，而是用 flex 强制顶部对齐：
.form-row {
display: flex;
flex-direction: column;
align-items: flex-start; /* 不要用 center */
}
-
align-items: center会让 label 和 input 按各自基线居中，视觉错位几乎必然发生 -
align-items: flex-start把两者左上角对齐，稳定且无需微调 - 若需 label 右对齐（如配合固定宽度布局），在 label 上加
text-align: right，不要动容器的 justify
输入框内文字贴边、看不清
用户常抱怨“打字时看不到光标”或“文字挤在左边”，其实是 input 内边距没撑开，或 box-sizing 没统一。
基础样式必须包含以下四点：
input, textarea, select {
padding: 12px 16px;
font-size: 16px;
box-sizing: border-box;
min-height: 44px;
}
-
padding是让文字远离边框的关键，仅靠line-height在部分安卓机型无效 -
box-sizing: border-box缺失会导致width: 100%失效，实际宽度 = 内容 + padding + border -
min-height: 44px不仅为了触控，也给文字留出垂直呼吸空间，防截断 - 别用
height: 44px—— 它会压扁文字行高，尤其在中文字体下易出现上下留白不均
响应式下 label 和 input 间距忽大忽小
小屏堆叠时，label 和 input 之间空隙过小（比如只有 4px），导致视觉粘连；大屏并排时又因 margin-right 过大显得松散。问题根源是用 margin 控制间距，而非语义化分隔。
推荐用 gap 替代 margin，配合结构包裹：
.form-row {
display: flex;
flex-direction: column;
gap: 8px; /* label 与 input 间距 */
margin-bottom: 20px; /* 表单项之间间距 */
}
-
gap不会触发 margin 合并，也不影响首尾外边距，比margin-bottom更可控 - 小屏默认
column+gap，大屏媒体查询里覆盖为row并调整gap值即可 - 如果用了
grid布局，同样适用gap，无需额外 hack
真实项目里最容易被忽略的是：label 的 font-size 和 input 的 min-height 必须同步设置，否则哪怕对齐了，文字也会在框里“飘”——一个太大，一个太小，可读性就断在了像素级细节上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
