bootstrap 5 的 bg-gradient 类不响应断点，需用媒体查询配合 background-image 实现；自定义类须加 !important 覆盖默认样式，js 动态切换需节流并手动初始化。
Bootstrap 5 的 bg-gradient 类本身不响应断点，加 md:bg-gradient 或 d-md-block 都不能让渐变“只在中屏生效”——它要么全局存在，要么整个元素被隐藏。真要实现断点渐变，必须绕过工具类，用媒体查询控制 background-image。
为什么 bg-gradient-* 类加断点前缀无效
Bootstrap 5 的 bg-gradient-primary 等类是纯 CSS 工具类，没有包裹任何媒体查询。你写 md:bg-gradient-primary，浏览器根本识别不了——这不是 Bootstrap 的语法，是 Tailwind 的写法。同样，bg-gradient-primary d-md-none 只会让元素在小屏消失，不是“渐变关闭”，而是“内容没了”。
-
bg-gradient本身只是个开关，必须搭配bg-primary等颜色类才生效；单独用无效 - 如果项目 SCSS 中设了
$enable-gradients: false，所有渐变类会静默失效，控制台无报错 - 用
background简写（如background: linear-gradient(...)）会清掉已有background-color，导致小屏 fallback 失败
用 @media + background-image 实现真正断点渐变
最直接、兼容性最好的方式：对目标容器写媒体查询，只在指定断点注入 background-image，基础态（小屏）保持纯色背景。
- 断点值必须严格匹配 Bootstrap 5 的
md：@media (min-width: 768px)（不是767px或770px） - 务必用
background-image，不是background——前者不会覆盖background-color，保证小屏能回退 - 方向优先写角度（如
135deg），比to right兼容性更稳；旧版 Safari 对to-r完全不支持 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50%, #000这种写法敏感，改用50% #000更稳妥
示例：仅在 md 及以上启用蓝紫渐变，小屏回退为浅灰
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
.hero-section {
background-color: #f8f9fa;
}
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件都要相同断点逻辑，可封装成类名，比如 bg-md-gradient-primary，避免重复写媒体查询。
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则需同等权重才能覆盖 - 定义时用
background-image，别用background；否则叠加bg-white时会把渐变干掉 - 使用时注意顺序：
class="bg-md-gradient-primary bg-light"——自定义类在前，基础色类在后，确保小屏显示bg-light - 若用 Sass，可复用 Bootstrap 断点变量：
@include media-breakpoint-up(md) { ... }
SCSS 示例：
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, $primary, $secondary) !important;
}
}
JS 动态切换类的适用场景与坑点
仅当需要响应滚动、视差或实时窗口变化时才用 JS；静态布局优先选 CSS 媒体查询。
- 监听
resize事件必须节流，否则频繁触发影响性能 - 用
window.matchMedia('(min-width: 768px)')判断，别靠window.innerWidth手动比对——它不响应 Bootstrap 的断点计算逻辑 - 切换类要用
classList.add()/classList.remove()，别重置整个className，否则会丢掉其他动态类 - 首次加载时需手动初始化，否则页面刚打开可能状态错乱
复杂点在于：渐变方向、色标位置、alpha 值三者稍一变动，文字对比度就可能跌破 WCAG 4.5:1——这没法靠工具自动修复，得手动调、反复测，尤其在深色模式下。
