渐变视觉失真是因容器宽高比未锁定，需用ratio类（如ratio-16x9）包裹渐变元素并设w-100 h-100，配合aspect-ratio或padding-top实现响应式比例控制，且必须声明overflow: hidden防溢出。
渐变本身没有“比例”可言，你真正想保持的，是应用渐变的容器的宽高比 —— 否则在不同断点下，渐变背景会被拉伸、压缩或裁切，视觉失真。直接给元素加 bg-gradient 类，再配合 col 或 img-fluid，完全无法控制容器尺寸，渐变必然变形。
为什么 bg-gradient 一缩放就“糊”了
bg-gradient 工具类只设置 background-image: linear-gradient()，它不绑定任何尺寸逻辑。一旦父容器（比如 .col-6）随屏幕变窄，渐变区域就跟着变窄，但渐变方向（如 135deg）和色标位置是固定角度计算的，结果就是：小屏下渐变条变密、颜色过渡生硬，大屏下拉得稀疏、失去焦点。
- 常见现象：同一段渐变代码，在手机上看着像“条纹”，桌面端却“晕开”，不是 CSS 写错了，是容器宽高比没锁住
-
bg-gradient-primary必须搭配bg-primary才生效（否则无 fallback 色），但bg-primary是纯色，和渐变共存时会叠加，不是替换 - 别指望
d-none d-md-block解决问题——它只是显隐整个元素，不是让渐变“适配”尺寸
必须用 ratio 容器包裹渐变区域
要让渐变“看起来稳定”，得先让它的承载容器有固定纵横比。Bootstrap 的 ratio 类（如 ratio-16x9）正是干这个的：它通过伪元素 ::before 的 padding-top 或现代 aspect-ratio 锁定宽高关系，与内容无关。
- 结构必须是：
<div class="ratio ratio-16x9"><div class="bg-gradient-primary w-100 h-100"></div></div>—— 渐变必须作用在ratio的子元素上，不能直接写在ratio容器自身 -
w-100 h-100确保子元素填满“画布”，否则渐变只占一角 - 如果子元素是
<img>或<iframe></iframe>，需额外设object-fit: cover或width: 100%; height: 100%，否则内容会溢出或留白 - 旧版 Bootstrap 或需兼容 IE？手动补
aspect-ratio: 16/9+@supports not (aspect-ratio: 1/1)回退到 padding-top 方案
响应式切换渐变容器比例要靠媒体查询
Bootstrap 没有 ratio-md-4x3 这种类。想实现“手机竖屏 4:5、平板 4:3、桌面 16:9”，只能手写媒体查询覆盖 padding-top 或 aspect-ratio。
- 推荐现代写法（Chrome/Firefox/Safari 15.4+）：
.hero-ratio { aspect-ratio: 4/5; }<br>@media (min-width: 768px) { .hero-ratio { aspect-ratio: 4/3; } }<br>@media (min-width: 992px) { .hero-ratio { aspect-ratio: 16/9; } } - 兼容性兜底（所有浏览器）：
.hero-ratio::before { padding-top: 125%; /* 4:5 → 5÷4=1.25 */ }<br>@media (min-width: 768px) { .hero-ratio::before { padding-top: 75%; /* 4:3 */ } }<br>@media (min-width: 992px) { .hero-ratio::before { padding-top: 56.25%; /* 16:9 */ } } - 切记：不要在
.col上直接设aspect-ratio—— flex 布局会干扰它；必须套一层独立<div class="hero-ratio"> <h3>渐变内容本身也要防拉伸</h3> <p>就算容器比例锁住了，里面放的文字、图标或 SVG 仍可能被 flex 或 grid 拉伸。尤其当 <code>ratio容器内嵌.btn或.card时：- 按钮文字别用
font-size: clamp()无脑缩放——小屏下字太小，大屏下挤成一团；应结合min-font-size和媒体查询分段控制 - SVG 图标建议用
viewBox+width/height属性，禁用preserveAspectRatio="none"，否则会强制拉伸 - 如果渐变区域里有
<video></video>或<canvas></canvas>，它们默认width: 100%; height: auto，必须显式设object-fit: cover并加overflow: hidden防裁切溢出
最易被忽略的一点：渐变容器的
overflow: hidden必须显式声明。Bootstrap 的ratio类默认带这个，但如果你自己写aspect-ratio或改用padding-top，漏掉这句，裁剪部分就会撑破布局 —— 尤其在object-fit: cover场景下，后果比想象中更严重。 - 按钮文字别用
