移动端背景渐变只显示左上角是因为容器高度为0或塌陷，需设min-height:100vh；tailwind响应式类如md:bg-gradient-primary不被bootstrap识别；应手动写媒体查询并确保渐变角度、颜色数及可访问性合规。
移动端背景渐变只显示左上角一小块
根本不是渐变没加载，而是容器高度为 0 或塌陷——background-image 在没有明确高度的元素上，会退化为按原始尺寸渲染，linear-gradient 也一样。你看到的“只显示左上角”，其实是渐变在高度为 0 的盒子里强行绘制的结果。
必须确保目标容器有可测量的高度：
-
min-height: 100vh是底线，别用height: 100%（它依赖父级，而html和body默认不占满视口） - 若容器是
.row或嵌套在.container内，先加min-height: 400px测试是否生效——排除栅格塌陷干扰 - 检查 computed styles 中
background-image是否为none：如果是，大概率被background: #fff这类简写覆盖了
用了 bg-gradient-* 却在小屏没效果
bg-gradient-primary 这类类名根本不响应断点，md:bg-gradient-primary 是 Tailwind 写法，Bootstrap 完全不识别；bg-gradient-primary d-md-none 会让整个元素消失，不是“渐变关闭”。
真正要实现“仅中屏起启用渐变”，只能手动写媒体查询：
- 基础态（小屏）先设
background-color: #f8f9fa，这是 fallback，不能漏 - 再用
@media (min-width: 768px)覆盖background-image，值写成linear-gradient(135deg, #0d6efd, #6f42c1) - 方向务必用角度（如
135deg），比to right兼容性更稳，旧版 Safari 对缩写支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000比50%, #000更友好
渐变铺不满、边缘留白或被裁切
常见于把背景图/渐变直接加在 .container 或 .row 上——它们自带 padding 和负 margin，导致背景渲染区域缩进。
正确做法是绕开栅格结构：
- 用独立 wrapper：
<div class="hero-bg"><div class="container">...</div></div> - 样式只写在
.hero-bg上：min-height: 100vh; background-image: ...; background-size: cover; - 若必须嵌套，给 wrapper 加
mx-n3 px-0抵消.row的负 margin 和.container的 padding - 检查祖先元素是否设了
overflow: hidden，它会直接截掉渐变超出部分
文字看不清、子元素盖住渐变
渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读。
这不是样式失效，是可访问性断裂：
- 同步调文字色：
text-white配深渐变，text-dark配浅渐变 -
.card等子元素默认有白色背景，会完全盖住容器渐变——改成background-color: rgba(255, 255, 255, 0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)里得重写渐变色，否则用户切主题后仍看到亮色渐变 - 别漏加
!important：Bootstrap 的bg-light等类自带!important，你的自定义渐变规则权重不够会失效
实际最难的不是写对 CSS，而是不同设备对 100vh 的解释不一致：Safari 的 100dvh、Android 的滚动条侵占、折叠屏的动态视口——这些都会让“充满”变成一个需要逐层校验的状态。
