调整Div尺寸时如何保持圆角比例？无需大量JS的方案

我制作了一个模拟会员卡/信用卡样式的布局，用占满全屏的圆角Div实现，简化代码如下：

.card {
    border: 1px solid black;
    border-radius: 100px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
}

<div class="card">
</div>

但缩小浏览器窗口时，圆角会明显过大；若用百分比设置border-radius，圆角会变形。请问是否有无需大量JavaScript的方法，保持Div尺寸与圆角的比例？

解决方案：纯CSS动态适配圆角比例 #

方法1：使用vmin单位

vmin是视口宽度和高度中较小值的1%，用它设置圆角能让圆角始终和元素的最小边保持固定比例，完美适配窗口缩放：

.card {
    border: 1px solid black;
    /* 10vmin相当于视口最小边的10%，可根据需求调整比例数值 */
    border-radius: 10vmin;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
}

方法2：用min()函数精确计算比例

如果需要更精准的比例控制，比如让圆角始终是元素宽高中较小值的固定百分比，可结合min()和calc()：

.card {
    border: 1px solid black;
    /* 取90vw和90vh中的较小值，乘以0.1（即10%比例），可调整0.1改变圆角大小比例 */
    border-radius: calc(min(90vw, 90vh) * 0.1);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
}

这两种方案都无需JavaScript，纯CSS就能解决窗口缩小时圆角过大、百分比设置变形的问题，保持圆角与元素尺寸的比例一致。

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