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

Question

jsfiddle的代码

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

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

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

Answer 1

更新了非js soln的小提琴。 - 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%;
}

基于此 - 高度等于动态宽度（CSS流体布局）

编辑 ：更新小提琴，连续两个圆圈

Answer 2

根据这篇文章回答

您必须为每个圆圈制作一个容器，其宽高比为1：1。 感谢Nathan Ryan，他为此指出了一个css解决方案。 他提供了4：3宽高比的解决方案，但对于您的问题，您需要1：1的宽高比。 这就是为什么你需要改变margin-top:75%; margin-top:100%; 为你容器.circle

小提琴

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>

CSS：

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

将容器设置为float:left; 而不是display:inline-block将避免您的圆圈之间的“白色空格”，您将完全控制您的圆圈的宽度和边距。