移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用

LESS代码：

.adaptive-circle {
    margin: 50px auto 0;
    width: 80%;
    height: 0;
    padding-top: 80%;

    border-radius: 100%;
    border: 1px solid #000;
    box-sizing: border-box; // for .layout { height: 100%; }

    position: relative;

    .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;

        &.middle {
            &:before {
                display: inline-block;
                vertical-align: middle;

                content: '';
                height: 100%;
                width: 0;
                overflow: hidden;
            }
            div:first-child {
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
}

View Code