CSS圈 - 响应

Question

我正在使用Bones WP主题作为首发。我有三个圆圈，放在一个3列布局内（每列一个圆圈）。每个圆圈的构建如下：

HTML

<a href="#" class="services">Text</a>

CSS

a.services{
margin:40px 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:320px;
height:320px;
border:20px solid #e5f2f7;
border-radius:100%;
text-align:center;
display:inline-block;
}

我正在声明圆圈的大小（320px X 320px），因此这不适用于移动设备。我想用百分比来做这件事。

因为我的HTML所在的列是响应式的，所以我应该可以使用100％的宽度 - 但是如何在调整大小时确保高度保持等于宽度？在某些断裂点，它变成一个细长的椭圆形。

Answer 1

我遵循了这篇文章：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

这是一个非常棒的解决方案。

CSS

.box{
position: relative;
width: 50%;     /* desired width */
}

.box:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}

感谢您将我与它联系起来！