Question

我想用css创建一个圆圈，不使用svg圈，我不想在长度和宽度上使用px我希望我的项目lill响应所有设备，我想使用％...

这是我正在使用

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中填充内定义的％是根据容器的宽度计算的。这意味着如果你在圆圈上使用填充底部等于宽度width: 50%＆amp;＆amp; padding-bottom: 50%，它将为元素提供与其宽度相同的高度。

Answer 2

您可以在现代浏览器中使用视口单元。

支持 - CanIUse.com

MDN Link - Viewport Units

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

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

如何在不使用px的情况下制作完美的圆形;宽度

2 个答案: