渐变方向必须用媒体查询完整重写linear-gradient()，不能只改to值；color stop百分比在非正方形容器中视觉位置会偏移，CSS变量在gradient方向参数中兼容性有限。
background-image 渐变方向不能用媒体查询直接改
CSS 的 background-image 一旦写死方向（比如 to right），光靠 @media 改 background 值，浏览器不会“重算”渐变轴线——它只认声明时的语法结构。你得把整条 linear-gradient() 重新写一遍。
用媒体查询完整重写 background-image
响应式换方向的本质，是不同断点下发不同的渐变定义。别想着只改一个参数，to bottom 和 to right 是两个完全不同的函数调用。
- 移动端常用竖向渐变：
background-image: linear-gradient(to bottom, #fff, #eee); - 桌面端想横着拉？必须完整覆盖：
@media (min-width: 768px) { ... background-image: linear-gradient(to right, #fff, #eee); } - 别漏掉 vendor prefix（虽然现代浏览器基本不需要了），但若要兼容 iOS Safari 9.3 以下，得加
-webkit-linear-gradient
color stop 位置在不同方向下行为一致，但视觉效果会偏移
写 50% 在竖向渐变里是垂直中点，在横向里就是水平中点——数值含义没变，但人眼看到的“停在哪”会因容器宽高比突兀跳变。尤其当容器不是正方形时，容易误判过渡位置。
- 如果容器高度远大于宽度（比如长列表项），
to right下50%可能只推进了几像素，看起来像没动 - 建议搭配
background-size控制渐变重复范围，或改用deg值（如90deg/0deg）更利于脚本化控制 - 避免用
left/top这类关键词混搭方向，to left top是合法但极少用，可读性差且部分旧安卓 WebView 不支持
不要用 JavaScript 动态拼 gradient 字符串
运行时用 JS 拼 linear-gradient(to ${dir}, ...) 再塞进 style.backgroundImage，看似灵活，实则触发强制同步布局 + 重绘，滚动时掉帧明显。CSS 自身的媒体查询是声明式、零开销的。
立即学习“前端免费学习笔记（深入）”；
- 除非方向逻辑极度复杂（比如根据 scrollY 实时插值），否则纯 CSS 更稳
- 如果真要用 JS，务必用
element.style.setProperty('--grad-dir', 'to right')配合 CSS 变量：background-image: linear-gradient(var(--grad-dir), ...) - 注意：CSS 变量不能直接用于
linear-gradient()的方向参数（Chrome 115+ 支持，但 Safari 16.4 仍不支持），得降级为calc()或预设多套类名
