background-size: cover对线性渐变无效，因其无固有尺寸；应改用background-size: 200% 200%配合background-position居中裁切，并结合vw/vh或js监听resize、orientationchange等事件实现真动态适配。
background-size设为cover为什么在手机上渐变还是被拉伸？
因为cover是按容器宽高比缩放整个背景图（含渐变），而线性渐变linear-gradient本质是“无限平铺的图像”，没有固有尺寸，浏览器会按元素宽高生成一个“初始渲染画布”，再用cover去适配——结果就是渐变方向被强行扭曲，尤其竖屏滚动时顶部和底部颜色过渡突兀。
- 真实场景：全屏登录页用
background: linear-gradient(135deg, #ff9a9e, #fad0c4)，iPhone上发现左上角粉色块异常放大 - 根本原因：
background-size: cover对渐变无效，它只对url()图片起作用；CSS规范里明确写明渐变的background-size行为是“无意义”（meaningless） - 验证方式：给同一元素同时加
background-image: linear-gradient(...), url(logo.png)，只调background-size，你会发现url部分缩放了，渐变部分纹丝不动
用background-size + background-position模拟动态适配
绕过规范限制，把渐变“当图片用”：先用大尺寸固定渐变范围，再靠background-position和background-size联动移动“可视窗口”。关键不是缩放渐变，而是控制哪一段被看见。
- 典型写法：
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)→ 设background-size: 200% 200%，再用background-position: center居中裁切 - 移动端适配核心：
background-size值必须大于100%，否则background-position没调节余量；推荐200% 200%或300% 300%，数值越大，微调越精细 - 响应式联动示例：
body {<br> background: linear-gradient(135deg, #ff9a9e, #fad0c4);<br> background-size: 200% 200%;<br> background-position: center;<br>}<br>@media (max-width: 768px) {<br> body { background-position: 30% 30%; }<br>}
viewport单位配合渐变起点终点更可控
用vw/vh代替百分比定义渐变范围，让角度和停靠点真正随视口变化，而不是依赖background-size间接调控。
- 问题场景：想让渐变从屏幕左上角开始，到右下角结束，但
linear-gradient(135deg, ...)在不同设备上起点偏移不一致 - 解法：
linear-gradient(to bottom right, #ff9a9e, #fad0c4)比角度值更可靠；进阶用linear-gradient(135deg, #ff9a9e 0vw, #fad0c4 100vw)，强制按视口宽度拉伸渐变色带 - 注意兼容性：
vw/vh在渐变中支持良好（Chrome 26+/Safari 6.1+/Firefox 19+），但IE全系不支持，如需兼容得降级为%或 JS 动态注入
真·动态适配要靠JavaScript监听resize
CSS本身无法感知滚动、视口缩放或字体缩放导致的视觉偏差，纯CSS方案在iOS Safari横竖屏切换、安卓键盘弹出时大概率失效。
- 必须监听的事件：
resize（窗口大小）、orientationchange（iOS方向切换）、甚至scroll（防滚动时渐变错位） - 轻量实现思路：用
getComputedStyle(document.body).backgroundImage读取当前渐变，再用element.style.backgroundPosition = `${x}px ${y}px`微调 - 容易踩的坑：
background-position设center center后JS再改，某些安卓WebView会重置为0% 0%；稳妥做法是始终用px或vw单位，避免混用关键词和数值
渐变背景的“适配”本质是视觉一致性问题，不是尺寸问题。最麻烦的从来不是写法，而是iOS Safari在input聚焦唤起键盘时触发的视口缩放——这时候连resize都收不到，得靠focusin/focusout兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
