因为bg-gradient-primary是bootstrap 5的全局无媒体查询类，不支持断点前缀（如md:），方向固定为135deg，且必须搭配bg-*类才生效；它在所有屏幕尺寸下均生效，无法响应式启停，正确做法是用@media (min-width: 768px)配合background-image手动控制。
为什么直接加 bg-gradient-primary 无法响应断点
bg-gradient-primary 是 Bootstrap 5 的全局 CSS 类，不包裹任何 @media 规则，也不支持 md: 前缀（那是 Tailwind 的语法）。它在所有屏幕尺寸下都生效，方向固定为 135deg，且不会随窗口宽度变化而启用或禁用。常见误操作包括：md:bg-gradient-primary（CSS 不生成）、bg-gradient-primary d-md-none（整个元素消失，不是渐变关闭）、bg-gradient-primary 单独使用（无颜色、无方向，实际无效）。
用 @media 精确控制渐变生效范围
最可靠的做法是绕过工具类，直接写媒体查询，只改 background-image，保留原有 background-color 作为小屏 fallback：
- 基础态（小屏）必须先声明：
.hero { background-color: #fff; } - 断点值严格对齐 Bootstrap 5：
@media (min-width: 768px)（不是767px或770px） - 只用
background-image: linear-gradient(...)，避免用background简写，否则会清掉background-color - 方向优先用角度（如
90deg表示从左到右），比to right兼容性更稳，尤其在旧版 Safari 中 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000格式比50%, #000更友好
自定义带断点前缀的渐变类（适合多处复用）
如果多个容器都需要“仅 md+ 渐变”，可定义类似 bg-md-gradient-primary 的类，但要注意：
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则需同等权重才能覆盖 - 使用 Sass 时推荐复用断点变量：
@include media-breakpoint-up(md) { ... }，避免硬编码像素值 - 颜色建议引用 Bootstrap 调色板变量（如
$primary,$secondary），便于主题同步 - HTML 中 class 顺序很重要：
class="bg-md-gradient-primary bg-white"——自定义类在前，降级纯色在后
容易被忽略的深色模式与可访问性细节
渐变背景一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时几乎不可读。这不是样式没生效，而是可访问性断裂：
- 必须同步调文字色：
text-white配深渐变，text-dark配浅渐变 - 子元素（如
.card）默认有白色背景，会完全盖住容器渐变——改成background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写渐变色，否则用户切深色主题后仍看到亮色渐变 - 别漏掉
background-color回退逻辑，否则小屏可能完全透明
