Bootstrap表单文字不随屏幕缩放，因form-control等类硬编码font-size: 1rem且覆盖继承值；须用clamp()显式设置（如.form-control{font-size:clamp(0.875rem,2.1vw,1.125rem)}），并同步line-height、单独处理textarea/select及表单对齐问题。
Bootstrap响应式表单文字大小不会自动随屏幕缩放——form-control、form-label等类默认用固定font-size（如1rem），不响应视口变化；必须用clamp()或媒体查询显式控制，且要避开fs-*类在表单元素上的失效陷阱。
为什么fs-*类对form-control无效
fs-*类依赖 CSS 自定义属性（如--bs-body-font-size）和 rem 计算，但.form-control有硬编码的font-size: 1rem声明，会直接覆盖继承值。即使你写<input class="form-control fs-lg-4">，浏览器开发者工具里看到的仍是1rem，不是clamp()结果。
- 不是断点没生效，是样式优先级被
.form-control自身的规则压制 -
fs-md-4这类带断点的变体，只对直接支持它的元素（如h1、p）起作用，input、select、textarea不在其作用范围内 - 加
!important能强行覆盖，但破坏 Bootstrap 的可维护性，不推荐
给表单控件加clamp()的正确写法
直接在自定义 CSS 中重写.form-control和.form-label的font-size，用clamp()锚定视口宽度，同时保持行高弹性：
.form-control { font-size: clamp(0.875rem, 2.1vw, 1.125rem); line-height: 1.4; }.form-label { font-size: clamp(0.875rem, 1.9vw, 1rem); }- 避免用
100vw——它含滚动条宽度，会导致小屏下字号跳变；vmin更稳，但需实测系数（例如2.3vmin） - 别忘了
textarea和select：它们也得单独加选择器，否则继承失效
表单内文字对齐与换行错位怎么防
字号缩放后，form-label和form-control容易因基线偏移、行高僵化或white-space残留导致视觉错位：
-
line-height必须用无单位值（如1.4），禁用line-height: 1.4rem或20px，否则缩放后行距卡死 - 含图标的表单组（如带
input-group和btn）统一用display: flex; align-items: center;，不用vertical-align: middle - 禁用
white-space: nowrap（尤其在form-text或错误提示里），否则窄屏下文字横向溢出 -
.form-check-input + .form-check-label组合要额外设line-height: 1.4，否则复选框和文字上下错开
旧浏览器兜底和移动端特殊处理
clamp()在 Safari 14.1+、Chrome 88+ 原生支持，但 iOS Safari 14.0 及部分 Android WebView 会整条忽略——这时降级必须存在，且不能靠 PostCSS 自动补全（clamp()无法可靠 polyfill）：
- 用
@supports包裹：@supports (font-size: clamp(1rem, 1vw, 2rem)) { .form-control { font-size: clamp(0.875rem, 2.1vw, 1.125rem); } }，外面写一层font-size: 1rem作为 fallback - iOS 上小屏
vmin可能压到低于 12px，Safari 会强制升到 16px，导致实际缩放失效；此时改用min-width: 320px配合媒体查询兜底更可控 - 触屏设备上，
form-control最小高度建议不低于44px（iOS 可点击区域规范），仅调字体不够，得同步检查padding和min-height
真正麻烦的不是写对clamp()，而是不同表单项（输入框、下拉、日期、开关）的字号缩放系数必须分别调——同一组参数套在input和form-switch上，视觉节奏大概率失衡，得实测到像素级。
