必须用媒体查询显式覆盖为 scroll（或默认值），因 background-attachment 不支持 partial reset，且需确保优先级足够、重置配套属性、规避 safari 渲染 bug。
直接禁用 background-attachment: fixed 在某个断点，不能靠“撤销 fixed”，而必须用媒体查询显式覆盖为 scroll（或重置为默认值）。否则浏览器会继承上层规则，fixed 依然生效。
为什么不能只写 background-attachment: scroll 就完事
因为 background-attachment 是一个独立属性，不支持 partial reset。如果你在全局写了 background-attachment: fixed，又在 @media (max-width: 991.98px) 里只写 background-attachment: scroll，它确实能生效——但前提是这条规则的 CSS 优先级 ≥ 原始规则，且没有被更宽泛的选择器覆盖。
常见翻车点：
- 用
.hero { background-attachment: fixed; }定义在 PC 端，但在移动端媒体查询里写@media (max-width: 991.98px) { .hero { background-attachment: scroll; } }—— 看似合理，但如果原始规则带!important或来自更高权重的样式表（比如 Bootstrap 自定义主题），这条覆盖就无效 - 忘了重置配套属性：
background-size: cover和background-position: center center在scroll模式下仍起作用，但若容器高度塌陷（比如没设min-height），背景图会缩成一条线甚至消失 - 移动端 Safari 对
background-attachment: fixed有渲染 bug，即使你写了scroll覆盖，某些 iOS 版本仍可能残留错位或闪烁，必须配合@supports检测降级
@media 中覆盖 background-attachment 的安全写法
推荐把所有依赖项打包重写，不依赖继承，避免隐式行为：
.hero-fixed {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
}
<p>@media (max-width: 991.98px) {
.hero-fixed {
background-attachment: scroll;
/<em> 必须补 height/min-height，否则 scroll 模式下背景随内容高度走 </em>/
min-height: auto;
/<em> 如果内容区很短，加个最小视觉高度兜底 </em>/
min-height: 400px;
}
}</p>
注意边界值：Bootstrap lg 断点是 992px，所以用 max-width: 991.98px 避免在 992px 像素点上出现双规则竞争（fixed 和 scroll 同时命中）。
移动端真要禁用 fixed？先确认是不是真需要
iOS Safari 和部分安卓 WebView 对 background-attachment: fixed 支持差，不是“禁用更好”，而是“禁用才可用”。但直接切到 scroll 可能导致背景图随内容滚动、露出空白，体验反而更差。
更稳妥的做法是：
- 用
@supports (background-attachment: fixed)包裹 PC 端 fixed 样式，让不支持的设备自动跳过 - 对不支持的设备，改用纯色背景 + 小尺寸装饰性图（
background-image: url('deco.svg')），而非强行 fallback 到 scroll 模式下的大图 - 如果必须保留图片，用
background-size: contain+background-position: top center，确保关键内容（如 Logo）始终可见，而不是靠cover硬裁
真正难处理的不是“怎么写 media query”，而是 fixed 背景一旦启用，就和页面滚动、transform 层、sticky 定位强耦合；禁用它只是表象，背后得同步检查 transform、overflow、will-change 是否干扰了渲染管线。
