移动端隐藏渐变须用@media清空background-image: none，而非删类或display: none；需严格断点(max-width: 767.98px)，保留background-color fallback，并分开处理深色模式与响应式规则。
移动端隐藏渐变，不能靠删类或设 display: none 了事——渐变是 background-image，得让它“彻底不渲染”，否则小屏下仍可能透出颜色、产生意外色带或性能损耗。
为什么 bg-gradient-* d-md-block 在移动端无效
这个组合只是控制元素显隐，不是关闭渐变本身。bg-gradient-primary 类在所有断点都注入 background-image，哪怕元素 display: none，CSS 规则依然存在；一旦你用 JS 或媒体查询临时恢复显示（比如滚动时），渐变会立刻出现，且无法保证与当前主题/深色模式同步。更麻烦的是，某些安卓 WebView 会在 display: none 元素上仍解析并缓存渐变资源，造成内存占用升高。
正确做法：用媒体查询清空 background-image
核心是让小屏下 background-image: none，同时保留 background-color 作为纯色 fallback。不要用 background: none，它会一并抹掉 background-color 和 background-position 等关键属性。
- 必须写
background-image: none，而不是background: none或background-image: unset - 断点值严格用
(max-width: 767.98px)，和 Bootstrap 5 的sm断点上限一致（不是767px或768px） - 如果容器已有
background-color（如bg-light），无需重复声明；若无，务必补上，否则小屏背景会透明 - 避免在同一样式块里混写
background简写和background-image，浏览器可能按顺序覆盖出错
示例（适用于 hero 区域）：
.hero-section {
background-color: #f8f9fa;
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
@media (max-width: 767.98px) {
.hero-section {
background-image: none;
}
}
复杂渐变（多色、径向、带透明度）怎么安全降级
移动端 Safari 和旧版 Chrome 对 radial-gradient、color-stop 百分比写法（如 50%, #000）支持不稳定，小屏强行渲染容易色偏甚至白屏。降级不是“简化”，而是“可控替换”。
- 径向渐变一律转为线性（
linear-gradient），方向用角度（90deg）而非to bottom - 带 alpha 的颜色（如
rgba(13, 110, 237, 0.8)）必须拆成两个纯色 fallback：#0d6efd+#e6f0ff（浅蓝白过渡），避免透明度在小屏被忽略后突兀变深 - 多于 3 个色标时，移动端只保留首尾两色，中间色标直接丢弃——浏览器不会报错，但渲染不可控
- 如果用了 CSS 变量定义渐变（如
linear-gradient(var(--grad-start), var(--grad-end))），小屏媒体查询里要重置变量值，不能只清background-image
深色模式 + 移动端隐藏的双重判断陷阱
别把 @media (prefers-color-scheme: dark) 和 @media (max-width: ...) 套在一起写。iOS Safari 15.4 之前版本不支持嵌套媒体查询，会导致整段规则失效，小屏深色模式下渐变照常渲染。
正确写法是分开声明：
@media (max-width: 767.98px) {
.hero-section {
background-image: none;
}
}
@media (max-width: 767.98px) and (prefers-color-scheme: dark) {
.hero-section {
background-color: #212529;
}
}
注意：第二个规则仅覆盖背景色，不重复清 background-image——它已在前一条中被清空。这种写法兼容所有 Bootstrap 5 支持的浏览器，包括微信 X5 内核。
最易被忽略的一点：如果你在 JS 中动态切换渐变类（比如滚动监听），记得在 resize 事件里也检查 window.matchMedia('(max-width: 767.98px)').matches，否则用户横屏切回竖屏时，渐变可能卡在“已启用”状态不退出。
