目标:
响应式 CSS 圆圈:
- 以相等的半径缩放。
- 半径可以按百分比计算。
- 半径可以通过媒体查询来控制。
如果解决方案是javascript,我仍然需要模拟媒体查询触发器。我不需要“媒体查询”,但我确实希望能够在某些宽度下按百分比控制半径:
@media (max-width : 320px)
{
.x2{padding: 50%;}
}
@media (min-width : 321px) and (max-width : 800px)
{
.x2{padding: 25%;}
}
@media (min-width: 801px)
{
.x2{padding: 12.5%;}
}
这是我到目前为止所拥有的:
<div class="x1">
<div class="x2">
lol dude
</div>
<div class="x2"></div>
<div class="x2"></div>
<div class="x2"></div>
</div>
.x1
{
float:left;
width:100%;
}
.x2
{
display:block;
float:left;
padding: 12.5%; //Currently being used to control radius.
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
}
问题:
在此解决方案中,将内容添加到圆圈时:
- 当缩放超过可用填充时,形状会扭曲。
- 增加半径的大小。
更新:
我在这里为此构建了一个可行的解决方案: Responsive CSS Circles