如何让圆形div始终半露在视口外并适配不同分辨率？

你的核心问题是仅使用vw单位会导致屏幕比例变化时，圆形的定位和大小比例失衡——因为vw是基于视口宽度，当屏幕变为竖屏（vh < vw）时，圆形的实际高度会远超视口，定位的vw偏移值也会失去相对比例，导致内容错位。

解决方案：用vmin单位统一尺寸与定位 #

vmin是取视口宽度（vw）和高度（vh）中的较小值，以此作为基准单位，能保证圆形在任何屏幕比例下都保持固定的相对大小和位置。

修改后的CSS代码如下：

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.wrapper {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.circlebox {
    /* 用vmin确保圆形始终基于视口最小边缩放 */
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    /* 用vmin替代vw，保持偏移比例固定 */
    left: -30vmin;
    top: -90vmin;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    background-color: red; /* 方便调试，可按需修改 */
}

.circlecontent {
    pointer-events: all;
    height: 50%;
    width: 65%;
    /* 同样用vmin保持相对位置 */
    right: -5vmin;
    padding: 0 5vmin;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* 修正原代码的align-content，确保垂直居中 */
    position: absolute;
    background-color: white; /* 方便调试，可按需修改 */
}

.image, .infobox {
    /* 可根据实际需求添加样式，确保内容适配 */
    flex: 1;
    padding: 1vmin;
}

关键改动说明 #

1. 替换vw为vmin：圆形的宽高和定位偏移都使用vmin，确保在宽屏（vw > vh）或竖屏（vh > vw）下，圆形的相对大小和偏移比例完全一致。
2. 修正垂直居中属性：将align-content: center改为align-items: center，flex容器中align-items才是控制row方向下的垂直居中对齐。
3. 完善视口占满设置：给body添加height:100vh，确保页面完全占满视口，避免滚动条或裁剪异常。

测试验证 #

分别在16:9宽屏、9:16竖屏、4:3等不同比例的屏幕下测试，圆形会始终保持你需要的部分出界效果，内部的白色内容区域也会稳定显示在视口内的正确位置。

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