orientation媒体查询是监听屏幕方向变化的唯一纯CSS方案，需配合to right/to bottom等语义值动态设置渐变方向，并注意DPR下background-size对渲染清晰度的影响。
用 orientation 媒体查询监听屏幕方向变化
横竖屏切换时，渐变角度不能硬写死，否则竖屏下从左到右的 linear-gradient(90deg, ...) 在横屏里会变成“从下到上”，视觉断裂。必须靠媒体查询动态响应：@media (orientation: landscape) 和 @media (orientation: portrait) 是唯一直接、轻量、无 JS 依赖的方案。
注意：orientation 判断的是 viewport 的宽高比，不是设备物理朝向；当浏览器窗口被拖拽成宽 > 高，就触发 landscape，哪怕手机是竖着拿的——这点常被误以为“不准确”，其实是设计使然。
-
orientation在桌面浏览器也生效（比如缩放窗口），别只测手机 - 不要混用
screen.orientationAPI 和媒体查询，前者有权限、延迟、兼容性问题，纯 CSS 方案更稳 - 渐变角度建议用
to right/to bottom这类语义值，比数字角度更易维护
渐变角度怎么映射横竖屏逻辑
常见错误是把“竖屏用 90deg、横屏用 0deg”当万能解——其实得看设计意图：如果希望渐变始终“沿阅读流方向”（竖屏从上到下，横屏从左到右），那对应的是 to bottom 和 to right；如果希望“始终沿屏幕长边”，就得用计算式，但 CSS 不支持 calc() 在渐变角度里动态算，只能靠媒体查询分写。
- 竖屏主内容流是垂直的 → 用
linear-gradient(to bottom, ...) - 横屏主内容流是水平的 → 用
linear-gradient(to right, ...) - 避免用
45deg这类固定值，它在两种方向下都斜穿，失去“随方向对齐”的意义 - 如果设计师给的是“竖屏 120°、横屏 30°”，直接写死两个媒体查询块，别试图用 JS 插入 style 标签
移动端 Safari 的 viewport 缩放导致 orientation 失效
iOS Safari 在双指缩放后，@media (orientation: ...) 可能卡在旧状态，不重新触发——这不是 bug，是 Safari 对缩放态 viewport 的特殊处理。用户缩放时，width/height 值变了，但 orientation 媒体查询不重算。
立即学习“前端免费学习笔记（深入）”；
- 加
viewportmeta 的maximum-scale=1能缓解，但牺牲可访问性，慎用 - 真需要缩放支持，改用
@media (min-width: 768px)这类断点替代 orientation，虽然语义弱了，但稳定 - 测试时务必手动双指缩放再旋转，别只靠 DevTools 的 device toggle
渐变背景在高 DPR 屏幕下模糊？检查 background-size
响应式渐变常配合 background-size: 200% 200% 做平滑悬停动效，但高 DPR 下（如 iPhone Retina），如果没配 background-size 或设得太小，渐变色块会被拉伸、出现像素级锯齿或色带。
- 固定尺寸渐变（如
background: linear-gradient(...); background-size: 400px 400px;）在 DPR=3 的屏上会模糊，优先用百分比或cover/contain - 用
background-size: 200% 200%+background-position: 0 0实现位移动画时，确保父容器有明确 width/height，否则在 flex/grid 容器里可能塌陷 - 不要对
background-image做 transform 缩放，CSS 渐变本身不支持 subpixel 插值，会糊
横竖屏渐变角度不是“换个数字就行”，核心是理解 orientation 查询的触发逻辑、设计意图与 DPR 下渲染表现之间的三层关系。漏掉任意一层，都会在某个机型或操作路径下出问题。
