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

我正在声明圆圈的大小(320 for 320‘t)，所以这对移动不起作用。我想用百分比代替。

因为我的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*/
}

谢谢你把我和它联系起来！