CSS渐变不自动响应窗口变化，需用vw单位控制色标位置实现伪响应，或用@media查询切换角度；JS动态更新仅在特殊场景慎用。
background-image: linear-gradient() 本身不响应窗口宽度变化
直接写 background-image: linear-gradient(90deg, #f00, #00f) 不会随窗口缩放自动调整渐变方向或色标位置。CSS 渐变里的角度、长度单位（如 50%、200px）在声明时就已计算完毕，后续 resize 不会重绘——它不像 vw 单位那样实时绑定视口宽度。
用 vw 单位控制色标位置可实现「伪响应」
虽然渐变函数不监听 resize，但你可以把色标位置写成基于视口的相对单位，让浏览器在每次重排时重新计算该值。关键点：只对色标（color stop）使用 vw，角度保持固定或用 deg 显式声明。
-
vw值必须用在色标位置，例如linear-gradient(90deg, red 0%, blue 75vw, green 100%) - 不能对角度用
vw（linear-gradient(50vw, ...)是无效语法） - 注意：色标总和不必等于 100%，但超出部分可能被截断或产生意外空白
div {
background-image: linear-gradient(
90deg,
#ff6b6b 0%,
#4ecdc4 40vw,
#44b3a2 100%
);
}
真正响应角度变化需配合 @media 查询分段控制
如果目标是「小屏竖向渐变、大屏横向渐变」这类逻辑，linear-gradient() 无法自己判断，必须靠媒体查询切换整个声明。此时角度是唯一需要换的参数，其他部分可复用。
- 常见断点：
max-width: 768px对应移动端，min-width: 769px对应桌面 - 避免同时写两套
background-image，用background简写覆盖更安全 - 注意：渐变方向角度变化时，色标位置单位（
%或px）行为一致，无需额外调整
@media (max-width: 768px) {
.hero {
background: linear-gradient(180deg, #3498db, #2c3e50);
}
}
@media (min-width: 769px) {
.hero {
background: linear-gradient(90deg, #3498db, #2c3e50);
}
}
进阶：用 CSS 自定义属性 + JavaScript 动态更新（慎用）
极少数场景需要像素级实时响应（比如渐变终点始终对齐某个滚动元素），可结合 JS 监听 resize 并更新 CSS 变量。但性能开销明显，且破坏了纯 CSS 的声明式优势。
立即学习“前端免费学习笔记（深入）”；
- 仅当
vw和@media都无法满足业务逻辑时才考虑 - 务必节流
resize事件（例如用requestAnimationFrame包裹） - 变量名要语义化，如
--gradient-stop: 60vw，并在 CSS 中用var(--gradient-stop)
绝大多数响应式渐变需求，vw 色标 + 媒体查询角度切换已足够。硬上 JS 容易让背景闪烁或卡顿，尤其在低端设备上。
