btn-sm/btn-lg不是等比缩放，因仅调整padding和font-size，而border-width、line-height、图标对齐、文字渲染等未同步缩放，导致高度偏差；需用rem基准链或自定义固定尺寸类实现真正等比缩放。
直接用 btn-sm 或 btn-lg 无法实现真正等比缩放——它们只是在默认按钮基础上做固定 padding 和 font-size 增减，不同颜色主题、边框样式、图标嵌入都会导致最终高度偏差 1–2px，视觉上“不齐”。真要按比例缩放，得绕过语义类，接管尺寸基准。
为什么 btn-sm/btn-lg 不是等比缩放
这两个类只改 padding 和 font-size，但：
• btn-outline-* 的 border-width 比实色按钮大 1px，盒模型总高就多出 2px
• 图标（如 <i class="bi bi-x"></i>）默认 inline，受 line-height 影响，而 line-height 在不同按钮类里没统一重设
• 空格、换行符、文字渲染差异（尤其是中英文混排）也会悄悄撑高容器
• 所有这些都没被“缩放”逻辑覆盖，只是静态叠加
用 html { font-size } + rem 实现全局等比缩放
Bootstrap v4/v5 内部少量使用 rem（比如分页的 font-size），但按钮本身几乎全是 em 和 px。想让它响应式缩放，必须自己建立 rem 基准链：
- 给
html设置动态font-size，例如以 375px 视口为 100px →1rem = 100px - 把所有按钮相关尺寸（
padding、border-radius、font-size、line-height）全改成 rem 单位 - 用 JS 监听
resize并防抖更新：document.documentElement.style.fontSize = `${100 * (window.innerWidth / 375)}px` - 务必在
DOMContentLoaded时先执行一次，否则首屏不生效
注意：这个方案会连带缩放所有你用 rem 写的其他组件，不是按钮专属——适合整站统一缩放需求。
更轻量的方案：自定义固定尺寸类（推荐上线用）
不碰根字体、不改 JS、不依赖 rem，直接写死关键属性值，加 !important 锁住：
.btn-fixed-md {
min-height: 40px !important;
padding: 0.375rem 0.75rem !important;
font-size: 0.875rem !important;
line-height: 1.5 !important;
border-radius: 0.25rem !important;
}
- 所有按钮（
btn-primary、btn-outline-danger等）都加这个类，视觉高度完全一致 - 如果项目用 Sass，优先改变量：
$btn-padding-y、$btn-font-size、$btn-line-height，再编译 - 别忘了同步控制图标尺寸：
.btn-fixed-md i { font-size: 0.875em; vertical-align: -0.125em; } -
btn-xs已从 Bootstrap 4+ 移除，需自行定义.btn-fixed-xs，不能依赖旧文档
别忽略的细节：点击反馈和禁用态也要同比例
缩放后，:active 的 transform: translateY(1px) 会显得太“轻”，因为 1px 在放大后的按钮上占比变小了。同样，.disabled 的透明度和背景色若没重算，会和新尺寸不协调：
- 把
:active的偏移量也转成 rem，比如transform: translateY(0.0625rem) - 禁用态建议用
opacity: 0.6而非默认的0.65，避免在高缩放比下仍显“太亮” - 如果用了
box-shadow做悬停效果，阴影的blur和offset也得同比例放大，否则看起来像糊在按钮边缘
真正难的不是“怎么缩”，而是缩完之后所有状态、子元素、交互反馈是否还对齐、是否还可用——这些细节一漏，用户第一眼就感觉“这个按钮怪怪的”。
