如何在屏幕尺寸变化时保持CSS渐变坐标与云朵形状不变？

问题根源 #

当前实现中，云朵的径向渐变使用百分比作为位置和尺寸单位，当页面缩放导致.sky容器宽高比变化时，径向渐变的圆形会因容器宽高的比例差异被拉伸，最终导致云朵形状变形。

解决方案（纯CSS实现） #

方法1：使用vmin单位保持比例 #

vmin是视口宽度和高度中的较小值，以此为单位定义渐变的位置和尺寸，能确保页面缩放时云朵的相对比例完全一致。

修改后的CSS代码：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.sky{
    width: 100%;
    height: 100vh; /* 改为占满视口高度，也可保留400px，vmin适配视口更自然 */
    background-color: rgb(92, 217, 255);
    background-image: 
        /* 云朵部分 */
        radial-gradient(circle at 46.5vmin 47vmin, white, white 0.9vmin, transparent 1.2vmin),
        radial-gradient(circle at 49vmin 45vmin, white, white 1.2vmin, transparent 1.5vmin),
        radial-gradient(circle at 51vmin 39vmin, white, white 0.9vmin, transparent 1.2vmin),
        radial-gradient(circle at 53.2vmin 46vmin, white, white 0.9vmin, transparent 1.2vmin),
        radial-gradient(circle at 51vmin 48vmin, white, white 0.9vmin, transparent 1.2vmin),
        radial-gradient(circle at 59vmin 51vmin, white, white 0.6vmin, transparent 0.9vmin),
        radial-gradient(circle at 61vmin 50vmin, white, white 0.6vmin, transparent 0.9vmin),
        radial-gradient(circle at 60.8vmin 53vmin, white, white 0.6vmin, transparent 0.9vmin),
        radial-gradient(circle at 62.7vmin 47vmin, white, white 0.6vmin, transparent 0.9vmin),
        radial-gradient(circle at 62.7vmin 53vmin, white, white 0.6vmin, transparent 0.9vmin),
        radial-gradient(circle at 64.7vmin 51vmin, white, white 0.6vmin, transparent 0.9vmin),
        /* 太阳部分 */
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 145, 0), transparent 0.6vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 150, 0), transparent 1.2vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 160, 0), transparent 1.8vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 170, 0), transparent 2.4vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 170, 0), transparent 3vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 190, 0), transparent 3.6vmin),
        radial-gradient(circle at 57vmin 35vmin, rgb(255, 190, 0), transparent 3.9vmin);
}

方法2：固定容器宽高比 #

给.sky容器设置固定宽高比，确保容器缩放时宽高比例不变，这样百分比单位的渐变就能保持原有形状：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.sky{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* 根据需求设置合适的宽高比，原400px高度对应宽约711px，16/9为近似比例 */
    background-color: rgb(92, 217, 255);
    background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, transparent 4%),
                      radial-gradient(circle at 49% 45%, white, white 4%, transparent 5%),
                      radial-gradient(circle at 51% 39%, white, white 3%, transparent 4%), 
                      radial-gradient(circle at 53.2% 46%, white, white 3%, transparent 4%), 
                      radial-gradient(circle at 51% 48%, white, white 3%, transparent 4%) , 
                      radial-gradient(circle at 59% 51%, white, white 2%, transparent 3%),
                      radial-gradient(circle at 61% 50%, white, white 2%, transparent 3%), 
                      radial-gradient(circle at 60.8% 53%, white, white 2%, transparent 3%), 
                      radial-gradient(circle at 62.7% 47%, white, white 2%, transparent 3%),
                      radial-gradient(circle at 62.7% 53%, white, white 2%, transparent 3%),
                      radial-gradient(circle at 64.7% 51%, white, white 2%, transparent 3%),
                      radial-gradient(circle at 57% 35%, rgb(255, 145, 0), transparent 2%),
                      radial-gradient(circle at 57% 35%, rgb(255, 150, 0), transparent 4%),
                      radial-gradient(circle at 57% 35%, rgb(255, 160, 0), transparent 6%),
                      radial-gradient(circle at 57% 35%, rgb(255, 170, 0), transparent 8%),
                      radial-gradient(circle at 57% 35%, rgb(255, 170, 0), transparent 10%),
                      radial-gradient(circle at 57% 35%, rgb(255, 190, 0), transparent 12%),
                      radial-gradient(circle at 57% 35%, rgb(255, 190, 0), transparent 13%);
}

关键说明 #

• 方法1的vmin单位适配视口缩放，云朵会随视口大小等比例缩放，适合全屏场景
• 方法2通过aspect-ratio固定容器比例，云朵形状不会因容器拉伸变形，适合需要固定比例的区域

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