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的小提琴。 - 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)

编辑：更新了小提琴以连续保持两个圆圈

Answer 2

根据this post

回答

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

更改margin-top:100%;到.circle的原因

<强> Fiddle

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将避免圈子之间的“空格”，您可以完全控制圈子的宽度和边距。

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

2 个答案: