javascript - 如何在不使用长度和宽度的像素的情况下制作完美的圆

Question

我想使用 css 创建一个圆，而不使用 svg 圆，我不想在长度和宽度上使用 px，因为我希望我的元素对所有设备都能响应，我想使用 %...

我在用

circle{
  position: relative;
  display: inline-block;
  width: 15%;
  height: 25%; 
  border-radius: 50%;
  background: #dfdfdf;

<box class="circle"></box>

//是他们找出每个设备的高宽比并使圆完美的任何脚本或方法

Answer 1

这是一个使用 % 使圆响应的解决方案:

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

.circle {
    width: 50%;
    height:0;
    padding-bottom: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}

另外，这里有一个 JSFiddle .

在这种情况下，padding-bottom 属性占父 div 的 50%。如果要减小尺寸，可以将其放在另一个容器中。

另外，CSS中padding中定义的%，是根据容器的宽度计算的。这意味着如果你对等于宽度 width: 50% && padding-bottom: 50% 的圆使用 padding-bottom，它会给元素相同的宽度高度作为它的宽度。