bg-gradient 类不响应断点，需用媒体查询手动控制渐变：小屏设 background-color，中屏起用 @media 覆盖 background-image；自定义类需加 !important 且前置，同时兼顾文字对比度、子元素透明度及深色模式适配。
bg-gradient 类本身不响应断点，加 md:bg-gradient 或 d-md-block 都不能让渐变“只在中屏生效”——前者是 Tailwind 写法，Bootstrap 不识别；后者只是控制显示/隐藏，不是控制渐变逻辑。
为什么 bg-gradient-primary d-md-none 不等于“小屏禁用渐变”
它会让整个元素消失，而不是保留元素但去掉渐变。小屏时你看到的是空白，不是回退到纯色背景。真正需要的是：渐变样式本身被断点条件控制，而非靠 display 切换。
直接写媒体查询是最可靠的做法
别试图复用 Bootstrap 工具类做响应式渐变，它的 bg-gradient-* 类没有包裹任何 @media 规则。必须自己补 CSS：
- 基础态（小屏）先写默认背景，比如
background-color: #f8f9fa - 再用
@media (min-width: 768px)覆盖background-image，方向用135deg比to right兼容性更稳 - 务必用
background-image，不是background—— 后者会清掉已有background-color或图片纹理 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000格式比50%, #000更友好
自定义带断点前缀的渐变类（适合多处复用）
如果多个容器都要“仅 md+ 渐变”，可以定义 bg-md-gradient-primary 这类类名：
- SCSS 中用
@include media-breakpoint-up(md)包裹，引用$primary和$secondary变量，避免硬编码 - 必须加
!important—— Bootstrap 的bg-light等类自带!important，你的规则权重不够会失效 - 使用时注意顺序：
class="bg-md-gradient-primary bg-light"，自定义类在前，保底色类在后 - 别漏掉
background-color回退逻辑，否则小屏可能完全透明
容易被忽略的兼容性和可访问性细节
渐变背景一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读。这不是样式没生效，而是可访问性断裂：
- 必须同步调文字色：
text-white配深渐变，text-dark配浅渐变 - 子元素如
.card默认有白色背景，会完全盖住容器渐变 —— 改成background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
prefers-color-scheme: dark里得单独重写渐变色，否则用户切深色主题后仍看到亮色渐变 - 方向值写
to bottom比to-b安全，旧版 Safari 不认缩写
