css - 如何在响应式设计中保持比例？

Question

Code at jsfiddle

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

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

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

Answer 1

为非 js soln 更新了你的 fiddle 。 - http://jsfiddle.net/D6pjd/23/

基本修改成这样的html(只显示一部分)-

<div class="circles">
  <div class="circle-container">
      <div class="dummy"></div>
      <div class="circle">
        <span class="circle1"></span>
      </div>
  </div>
...
...
</div>

和 css 的变化 -

.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%;
}

基于此 - Height equal to dynamic width (CSS fluid layout)

编辑:更新 fiddle 以保持连续两个圆圈