更新:原始发布(已删除)忽略了您正在寻找响应式设计的事实。在您引用的响应式圆形问题的答案基础上构建,似乎在所有CSS3浏览器中都可以工作,请查看fiddle。
HTML(需要五个级别的包装器,在此HTML中仅显示一个圆形)
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
All types of content (see fiddle)
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
CSS
.circles{
margin:0px auto;
}
.circles > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
@media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
@media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
@media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
<div class="mycircle">
<div class="mycontent">
<span>TEXT</span>
</div>
</div>
CSS
.mycircle {
width: 30%;
height: 0;
padding: 15% 0; //padding top & bottom must equal width
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #dedede;
}
.mycontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.mycontent:before {
content: '';
vertical-align: middle;
display: inline-block;
width: 0;
height: 100%;
}
.mycontent span {
vertical-align: middle;
display: inline-block;
}
margin: auto; /*will center the element*/
position: relative;
top: 50%;
margin-top: - [here insert the height of the element if you know in advance / 2]px