<p>唯一真正响应式控制全屏背景渐变的路径是用 background-image: linear-gradient() 配合 min-height: 100vh 和媒体查询；Bootstrap 5 的 bg-gradient-* 类无断点逻辑，无法实现小屏纯色回退，必须手动通过 CSS 媒体查询分层定义基础态与大屏渐变态。</p>
直接用 background-image: linear-gradient() 配合 min-height: 100vh 和媒体查询，是唯一能真正响应式控制全屏背景渐变的路径；Bootstrap 5 自带的 bg-gradient-* 类不支持断点切换，硬套只会让小屏也显示渐变，破坏可读性或布局。
为什么 bg-gradient-primary 在断点下无效
Bootstrap 5 的 bg-gradient-primary 是一个无条件生效的全局类，它没有内置任何媒体查询逻辑。加 d-none d-md-block 只会隐藏整个元素，不是“关掉渐变”，而是“删掉内容”。更糟的是，如果你把它和 bg-light 同时写在一个元素上，bg-gradient-primary 会覆盖 bg-light 的 background-color，但小屏下你得不到纯色回退——因为渐变还在。
-
bg-gradient-*类本质是设置background-image，不控制background-color回退逻辑 - 它不感知断点，
md:bg-gradient-primary是 Tailwind 写法，Bootstrap 不识别 - 想“只在大屏渐变、小屏纯色”，必须手动拆开定义基础态和媒体查询态
正确写法：CSS 媒体查询 + 显式 fallback
把小屏默认样式写在外面，大屏渐变用 @media 覆盖。这样既保证 SSR 友好，又避免 JS 介入带来的 FOUC 或兼容问题。
- 基础态（所有尺寸）设纯色：
.hero { background-color: #f8f9fa; } - 仅在 md+ 启用渐变：
@media (min-width: 768px) { .hero { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - 务必用
135deg这类角度值，不用to right——旧 Android WebView 不认后者 - 如果项目用 Sass，可直接引用
map-get($grid-breakpoints, md)，语义更清晰
容器高度必须显式声明，cover 不等于全屏
渐变再漂亮，容器没高度就是白搭。background-size: cover 对渐变无效，它只作用于 background-image；而渐变是 background-image，所以你要确保容器有足够高度让它“铺开”。
- 用
min-height: 100vh，不是height: 100vh——内容超长时后者会截断 - iOS Safari 滚动时地址栏收起会导致
100vh短暂偏高，可加min-height: 100dvh作为补充（2026 年已广泛支持） - 别往
.container里塞——它的max-width和padding会让渐变被框住，改用.container-fluid或直接挂body - 如果嵌套在
.row里，确认其父级（如.container-fluid）也设了min-height，否则高度链断裂
按钮或文字层叠加时容易被盖住
渐变背景本身不带层级，z-index 不起作用。一旦你在上面放文字或按钮，它们可能被浏览器渲染顺序压到渐变下面，尤其当用了 position: relative 却没设 z-index 时。
- 给文字容器加
position: relative; z-index: 2;（数值只要比背景层高就行） - 避免对渐变容器本身设
z-index: -1——这在部分安卓 WebView 下会导致背景图消失 - 文字对比度要实测：同一组蓝紫渐变，在
sm屏上配text-dark刚好，在xl屏因字体相对变小、环境光变化，可能立刻看不清 - 别依赖
bg-opacity微调——它作用于background-color，对background-image无效
最常被忽略的是：渐变本身没有“响应式缩放”概念，它只是铺满容器；所谓响应式，全靠你控制容器高度、断点下的颜色组合、以及小屏是否主动降级为纯色——这些都得手写，没捷径。
