时间戳

首页 > 解决方案 > 如何在响应式设计中定位圆圈并使它们保持相同的排列？

css - 如何在响应式设计中定位圆圈并使它们保持相同的排列？

问题描述

目的是在这种位置创建 3 个圆圈

我打算创建一个包含 3 个圆圈的网站背景。我可以以我喜欢的方式排列它们，但是，如果我将浏览器变小，则圆圈 2 会上升到很远，圆圈变得太小，从而使圆圈的距离太大。我想在较小的屏幕上保留照片编排。我觉得进行大量媒体查询会很麻烦，有没有更简单的方法？

HTML：

<main>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</main>

CSS：

main {
height: 1000px;
background-color: #EEE1FF;
// margin: 10%;
// z-index: -2;
}

.circle {
position: absolute;
width: 60%;
padding-bottom: 60%;
height: auto;
border-radius: 50%;
background: #F4ECFE;
}

.circle:nth-child(1){
    top: -15%;
    left: -15%;
    z-index: 1;
}

.circle:nth-child(2){
    top: -50%;
    left: 55%;
}

.circle:nth-child(3){
    top: 40%;
    left: 35%;
}

标签： csssass

解决方案

这里没有最好的解决方案。

您可以使用媒体查询或 csscalc函数来播放绝对单位和相对单位的总和。您可以尝试类似（来源）：

width: calc(100px + 50%)

您还可以添加一个min-width属性来定义您的圆圈的最小长度。

推荐阅读