Css 如何在响应性设计中保持比例？

我有几个圆圈包含在一个容器分区中。我使用百分比，因为我希望圆圈保持响应，并根据屏幕大小放大。我还希望这些圆保持为圆形，而不是像当前调整窗口大小时那样变成椭圆形。这显然是因为屏幕的宽度和高度很少相等，因为我选择的是百分比高度和宽度，这正是我应该得到的

但是，如何获得在不同屏幕尺寸上仍保持圆圈的响应圆圈

.circle {
    margin: 5%;
    display: inline-block;
    width: 30%;
    height: 30%;
    background: #000;
    border-radius: 50%;
    position: relative;
}

---

为非js soln更新您的小提琴

基本上是这样修改的html（只显示一部分）——

基于此——

编辑：更新了小提琴，使其仅在一行中保留两个圆圈

答案基于

必须为每个圆制作一个长宽比为1:1的容器。感谢Nathan Ryan，他为此指出了css解决方案。 他给出了4:3纵横比的解决方案，但对于您的问题，您需要1:1的纵横比。这就是为什么您需要更改

margintop:75%至<代码>页边距顶部：100%为您的容器
。圈出


html:

  <div class="circles">  
      <div class="circle_container">
          <div class="circle">
            <span class="circle1"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle2"></span>
          </div>
      </div> 
      <div class="circle_container">
          <div class="circle">
            <span class="circle3"></span>
          </div>
      </div>    
      <div class="circle_container">
         <div class="circle">
            <span class="circle4"></span>
          </div>
      </div>
      <div class="circle_container">
          <div class="circle">
            <span class="circle5"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle6"></span>
          </div>
      </div>
</div>

将容器设置为
float:left
而不是
显示：内联块
将避免圆圈之间的“空白”，您将完全控制圆圈的宽度和边距。
@codehouse感谢您的评论，但这不会起作用，因为我们使用像素时不再响应。看这里的问题，因为边界半径，它们是圆。如果我调整边界半径，我将得到其他形状，但不是圆，并且我想要所有屏幕大小的圆。请尝试其他解决方案：@codehouse理论上您是对的，但前提是您的元素具有正方形尺寸。否则，限制是最短的边：）检查此项-使用此解决方案，您可以分析3个圆。更新为仅保持两个圆在一行中
.circle-container {
    margin: 20px;
    display: inline-block;
    position: relative;
    width: 30%;    
}

.dummy {
    padding-top: 100%; 
}

.circle {
    margin: 5%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: #000;
    border-radius: 50%;
}

  <div class="circles">  
      <div class="circle_container">
          <div class="circle">
            <span class="circle1"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle2"></span>
          </div>
      </div> 
      <div class="circle_container">
          <div class="circle">
            <span class="circle3"></span>
          </div>
      </div>    
      <div class="circle_container">
         <div class="circle">
            <span class="circle4"></span>
          </div>
      </div>
      <div class="circle_container">
          <div class="circle">
            <span class="circle5"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle6"></span>
          </div>
      </div>
</div>

html, body {
    background: pink;
    font-family: 'Helvetica Neue' sans-serif;
    font-size:100%;
}
.circle_container{
    float:left;
    position: relative;
    width: 30%;
    margin:10%;
}
.circle {
    margin-top: 100%
}

.circle1, .circle2,.circle3,.circle4,.circle5,.circle6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-radius: 50%;
}