bootstrap 5 渐变背景不响应浏览器缩放，仅通过媒体查询按断点控制：小屏用纯色，大屏启用 linear-gradient(135deg)；禁用 background 简写以防清空渐变，且需注意父/子元素背景色覆盖问题。
渐变背景随屏幕缩放改变，本质是响应式控制，不是缩放适配
Bootstrap 5 的 bg-gradient-* 类本身不响应缩放（zoom）或视口缩放（viewport scaling），它只响应断点（breakpoint）变化。所谓“随屏幕缩放改变”，实际需求通常是：在小屏下禁用渐变、大屏下启用；或在不同断点切换不同渐变方向/颜色。不存在“浏览器 Ctrl+/- 缩放时自动调整渐变”的原生机制——那属于 UA 样式范畴，不可控也不该干预。
@media 写断点媒体查询是最稳的方案
直接复用 Bootstrap 5 的断点值，用 CSS 媒体查询控制 background-image 的有无或具体值。关键不是“缩放”，而是“宽度阈值”：
-
@media (min-width: 768px)对应md断点，不是767px或770px - 基础样式（小屏）必须写在媒体查询外，否则大屏可能继承不到 fallback 色
- 别用
background简写，它会清空background-image，改用background-image单独设置 - 渐变方向统一用角度（如
135deg），比to right兼容性更稳，尤其 iOS Safari
示例：小屏纯白，md+ 切为左上→右下蓝紫渐变
.hero-section {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
别指望 bg-gradient-* 类自己响应断点
所有内置渐变类（如 bg-gradient-primary）都是全局生效的，没有 md:bg-gradient-primary 这种写法 —— 那是 Tailwind 的语法，Bootstrap 不支持。试图组合 d-none d-md-block 也行不通：它只是控制元素显隐，不是“渐变开关”。常见错误包括：
- 给同一元素加
bg-gradient-primary d-none d-md-block→ 小屏时元素被隐藏，不是渐变消失 - 混用
bg-white和bg-gradient-primary→ 后者虽设background-image，但bg-white的background-color仍存在，视觉上可能被覆盖 - 依赖
bg-gradient单独使用 → 它只是个无样式的开关，不配颜色类等于无效
需要动态响应窗口 resize？用 JS 监听 + 切换类
仅当业务逻辑要求「实时响应窗口尺寸变化」（比如配合滚动视差、动画触发）时才需 JS。纯展示型页面，CSS 媒体查询足够且性能更好：
- 监听
resize事件，用matchMedia判断当前断点，避免频繁计算 - 用
element.classList.toggle("has-gradient", matches)控制类名，比反复 setAttribute 更轻量 - 别在 resize 回调里直接操作
style.backgroundImage—— 难维护，且破坏 CSS 可维护性 - 如果项目用 Sass，可提前定义好断点变量：
@media (min-width: map-get($grid-breakpoints, lg)) { ... }
真正容易被忽略的点是：渐变是否可见，往往不是 CSS 写错了，而是父容器或子元素的 background-color 把它盖住了。检查 computed styles 中 background-image 是否为 none，是的话，大概率被某处 background: 简写清掉了。
