纯 linear-gradient 本身不响应屏幕尺寸，需用 @media 为不同断点预设渐变配置：移动端常用 to bottom 或小角度（如 15deg），桌面端可用 to right 或更大角度（如 135deg），色标位置也可在媒体查询中调整。
背景渐变如何响应屏幕尺寸变化
纯 linear-gradient 本身不响应屏幕尺寸，它只按你写的数值（如 45deg、to right）固定渲染。想让它“随屏幕变化”，本质是用 @media 切换不同渐变配置，而不是让一个渐变自动缩放或旋转。
用 @media 切换 background-image: linear-gradient()
这是最直接、兼容性最好、也最容易控制的方式。关键不是“动态计算”，而是为不同断点预设合理值。
- 移动设备常用
to bottom或小角度（如15deg），避免横向渐变被截断 - 桌面端可改用
to right或更大角度（如135deg），增强横向延展感 - 注意：角度单位必须带
deg，方向关键词（如to top）不能和数值混用 - 渐变色标位置（如
0%, 50%, 100%）也可在媒体查询里调整，适配不同高度容器
body {
background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
@media (max-width: 768px) {
body {
background-image: linear-gradient(to bottom, #ff9a9e, #fad0c4);
}
}
@media (min-width: 1200px) {
body {
background-image: linear-gradient(165deg, #ff9a9e, #fad0c4);
}
}
为什么不用 JavaScript 动态生成渐变
除非有特殊交互动效（比如滚动时渐变角度实时变化），否则没必要。JS 计算并写入 style.backgroundImage 带来额外开销，且在 SSR 或打印样式中失效。
-
window.matchMedia()可监听媒体查询变化，但仅适合需要 JS 介入的逻辑（如配合动画帧） - 纯尺寸适配交给 CSS 更轻量、更可靠
- 某些渐变参数（如色标百分比）若依赖
clientHeight，会导致 SSR 渲染不一致
容易被忽略的兼容性细节
旧版 Safari（linear-gradient 的语法支持较严格，尤其涉及多色标和透明度时。
立即学习“前端免费学习笔记（深入）”；
- 避免写
rgba(255,154,158,0.8)→ 改用十六进制加透明度（#ff9a9ecc）更稳妥 - 方向写法统一用
to bottom而非0deg，后者在部分 Android WebView 中表现异常 - 如果用 CSS 变量控制渐变（如
background-image: linear-gradient(var(--grad-dir), ...)），需确认目标浏览器支持变量在linear-gradient内部展开（Chrome 84+、Firefox 76+）
