屏幕尺寸变化时Linear gradient无法固定于起点0的技术求助

你用固定角度的线性渐变，屏幕宽高比一变，渐变线的起始/结束位置就会偏移，导致没法从左上角（0,0）开始。要解决这个问题，推荐下面几种方法：

方法1：用方向关键字替代固定角度 #

把-5deg换成to bottom right（指向右下角），这样渐变线始终从左上角延伸到右下角，屏幕宽高变化时角度会自动调整，但起始点牢牢锁定在左上角：

body #screen-background{
    background: linear-gradient(to bottom right, #DFDFDD 10%, #3D4A6D 11%);
    background-position: 0 0; /* 强制背景从左上角开始 */
    background-size: 100% 100%; /* 背景铺满整个元素 */
}

方法2：针对不同宽高比微调角度 #

如果想更贴近原来的-5deg效果，可结合媒体查询，针对不同宽高的屏幕调整角度，同时保留background-position: 0 0确保起点不变：

body #screen-background{
    background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
    background-position: 0 0;
    background-size: 100% 100%;
}

/* 宽屏（比如宽高比超过16:9）时调小角度 */
@media (min-aspect-ratio: 16/9) {
    body #screen-background{
        background: linear-gradient(-3deg, #DFDFDD 10%, #3D4A6D 11%);
    }
}

/* 窄屏（比如宽高比小于4:3）时调大角度 */
@media (max-aspect-ratio: 4/3) {
    body #screen-background{
        background: linear-gradient(-7deg, #DFDFDD 10%, #3D4A6D 11%);
    }
}

方法3：用100vmax确保覆盖全屏 #

如果#screen-background是全屏元素，用100vmax作为背景尺寸，能保证渐变始终覆盖整个视口，且起点对齐左上角：

body #screen-background{
    background: linear-gradient(-5deg, #DFDFDD 10%, #3D4A6D 11%);
    background-position: 0 0;
    background-size: 100vmax 100vmax;
    background-repeat: no-repeat;
}

这几种方法都能让非移动端屏幕尺寸变化时，渐变始终从起点0开始，同时允许角度随屏幕自适应调整，符合你想要的效果。

内容的提问来源于stack exchange，提问作者Erbi Silva