Question

好的，这是响应式圈子的常见css标记。

<div class="circle"></div>
.circle {
    width: 25%;
    height:0;
    padding-bottom: 25%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}

问题是，调整宽度时调整大小，但不调整高度。有没有办法做到这一点，宽度和高度都会调整圆圈的大小？

Answer 1

如果删除padding-bottom: 25%;并以像素为单位给出高度和宽度，那么我们可以按高度和宽度调整div的大小，这里是example

Answer 2

不幸的是，CSS中的百分比通常仅指视口的宽度，这就是为什么在25％以上的高度等于25％的宽度。

您可以探索一些新的viewport units，它可以响应视口高度;媒体查询也可以根据视口高度更改元素，但这两者都会相当不稳定，并且不会像使用百分比一样顺利调整大小。

修改

可能需要进行一些调整，并且没有最强大的浏览器支持，但是这个CSS会创建圆圈，可以在保持宽高比的同时调整宽度和高度。

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

Answer 3

在其他post上发表评论时，您可以使用vh单位尝试max-height和max-width： http://jsfiddle.net/Jyjjx/95/（从你最初的小提琴）

.container {
    width:100%;
    height:100%;
    box-shadow:inset 0 0 0 1px; /* show yourself */
    text-align:center;
    background:linear-gradient(to bottom,
        rgba(0,0,0,0) 48%,
        rgba(0,0,0,0.5) 48%,
        rgba(0,0,0,0.5) 52%,
        rgba(0,0,0,0) 52%
        );

}
.round-button {
    width:25%;
    margin:auto;
    max-height:25vh;
    max-width:25vh;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #cfdcec;
    overflow:hidden;
    background: #4679BD;
    box-shadow: 0 0 3px gray;
}
.round-button span {
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

<div class="container">
    <div class="round-button">
        <div class="round-button-circle"><span class="round-button">G</span>
        </div>
    </div>
<div>

响应宽度和高度的圆圈

3 个答案: