小屏幕应禁用背景渐变而保留纯色背景，正确做法是先设 background-color，再用 @media (min-width: 768px) 覆盖 background-image；不可用 d-sm-none 或非标准类名，需兼顾可访问性、深色模式与兼容性。
小屏幕（比如手机）上背景渐变不会“动画”，你看到的其实是渐变样式本身在所有断点下都生效了——bg-gradient 类没有响应式逻辑，它一加就全局生效。取消小屏渐变，本质是让渐变“只在中大屏出现”，小屏回退为纯色背景。
为什么 bg-gradient-primary d-sm-none 不行
这个组合会让整个元素在小屏消失（display: none），而不是保留容器、只关掉渐变。用户会看到一块空白，不是你想要的“纯色背景”。更糟的是，如果容器里有文字或子组件，它们也跟着消失了。
-
d-sm-none控制的是显隐，不是渐变开关 -
bg-gradient-*类不带任何@media规则，Bootstrap 5 源码里压根没写断点包裹 - 试图用
sm:bg-gradient是 Tailwind 写法，Bootstrap CSS 完全不识别，浏览器直接忽略
正确做法：用媒体查询覆盖 background-image
渐变本质是 background-image: linear-gradient()，而纯色是 background-color。小屏先设好 background-color，再在中屏及以上用 @media 覆盖 background-image，就能干净分离。
- 断点值必须严格用 Bootstrap 5 的
768px（对应md），别写767px或770px - 务必用
background-image，不是background简写——后者会清掉你已设的background-color或纹理 - 方向推荐写
135deg，比to right兼容性更稳，尤其 iOS Safari 旧版本 - 颜色至少两个，否则还是纯色；移动端 Safari 对
50% #000格式比50%, #000更友好
.hero-banner {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero-banner {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
自定义类复用时要注意权重和顺序
如果多个地方都要“仅 md+ 渐变”，可以定义 bg-md-gradient 这类类名，但得小心 CSS 优先级陷阱：
- Bootstrap 的
bg-light、bg-white等类自带!important，你的自定义规则若没更高权重，会被盖掉 - 使用时必须把自定义类写在前面：
class="bg-md-gradient bg-light"，这样小屏才 fallback 到bg-light的纯色 - SCSS 中可用
@include media-breakpoint-up(md)包裹，并引用$primary变量，避免硬编码色值 - 别漏掉小屏的
background-color回退——否则小屏可能完全透明，文字看不清
容易被忽略的可访问性与兼容性细节
渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，这不是样式没生效，而是可访问性断裂：
- 浅色渐变配默认
text-dark，阳光下几乎不可读；深渐变必须同步配text-white -
.card等子组件默认白色背景，会完全盖住容器渐变——得改成background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写渐变色，否则用户切深色主题后仍看到亮色渐变 - 旧版 Safari 不认
to bottom缩写，统一用角度值（如180deg）最稳妥
真正关键的不是“怎么写渐变”，而是“怎么让它只在该出现的地方出现，且不影响文字可读、子元素透出、深色模式适配”。媒体查询是唯一可靠路径，其他取巧方式都会在某个环节掉链子。
