html - 响应式 CSS 圆圈

Question

目标：

响应式 CSS 圆圈：

1. 以相等的半径缩放。
2. 半径可以按百分比计算。
3. 半径可以通过媒体查询来控制。

---

如果解决方案是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%;}
}

这是我到目前为止所拥有的：

http://jsfiddle.net/QmPhb/

<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

Answer 1

您不需要对此进行@media查询。这是我的尝试，纯 CSS：

.x1 {
    overflow:hidden;
}
.x1 .x2 {
    display:block;
    float:left;
    padding: 12.5%;
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
    position: relative;
}
.x1 .x2 span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    line-height: 1em;
    height: 1em;
    font-size: 100%;
    overflow: hidden;
}​

小提琴

全屏

Answer 2

更短的代码

此解决方案减少了您的代码大小，但保留了功能。我保留了原来.x#的 , 删除了.x0,.x3和.x6那些不需要的。因此，在最终解决方案中，您可能会重新编号（但我希望您看看消除了什么）。

您的任何“分裂”需要不同top或left设置的圆圈的部分都需要有一个满足或超过.x2 > div要覆盖的选择器的选择器，因此为什么我.x2 > .x7的某些选择器有等。

（如以下评论中所述，Chrome在赏金开始时 OP 发布的原始技术存在错误问题。这并不能解决这些问题，因此请在另一个浏览器中查看以下内容。）

这是修改后的小提琴。

HTML

<div class="x1">
        <div class="x2">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x7">
                    dude
                </div>
                <div class="x8">
                    dude
                </div>
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>

CSS

.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    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;
}

/* BEG Content */
.x2 > div {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
}
.x4,.x5 {
    width:100%;
    height: 20%;
}
.x2 > .x7, .x2 > .x8 {
    width:50%;
    height: 60%;
    top: 20%;
}
.x4 {
    background-color:blue;
}
.x2 > .x5 {
    background-color:yellow;
    top: 80%;
}

.x7 {
    background-color:green;
}
.x2 > .x8 {
    background-color:orange;
    left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}

编辑：根据评论，看来 OP 需要的东西更像是这个小提琴提供的控件（在 Chrome 中不起作用；在此编辑时，OP 没有回复我以知道这是否是所需的功能类型）。

Answer 3

解决方案：

http://jsfiddle.net/WTWrB/

DIV 结构：

我们使用overflow:hiddenin溢出 子元素的.x2背景颜色。.x3

注意内容开始于.x3

<div class="x0">
    <div class="x1">
        <div class="x2">
            <div class="x3">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x6">
                    <div class="x7">
                        dude
                    </div>
                    <div class="x8">
                        dude
                    </div>
                </div>                
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
            </div>
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>
</div>

CSS：

@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}
.x0 {
    float:left;
    width:100%;
}
.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    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;
}
.x3 {
    position: absolute;
    width: 100%;
    left: 0;
    top:0;
    font-size: 100%;
    float:left;
    height:100%;
    background-color:red;
}
/* BEG Content */
.x3 div{float:left;}
.x4,.x5,.x6 {
    width:100%;
}
.x7,.x8 {
    width:50%;
    float:left;
    height:100%;
}
.x4,.x5,.x7,.x8 {
    text-align:center;
}
.x4 {
    background-color:blue;
    height:20%;
}
.x5 {
    background-color:yellow;
    height:20%;
}
.x6 {
    height:60%;
}
.x7 {
    background-color:green;
}
.x8 {
    background-color:orange;
}
/* END Content */

Answer 4

我知道这个解决方案与这里建议的有很大不同，但我仍然认为值得提出。

我使用图像作为掩码来创建圆，并利用了这样一个事实，即当填充指定为百分比时，它是根据其父元素的宽度而不是高度来计算的。这使我能够创建一个完美的正方形。

此处按比例调整大小的圆圈演示

HTML 代码

<div class="container">
    <img class="circle" src="circleImage.png">
</div>

CSS 代码

.container {
    position: relative;
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #bbb;

}

.circle { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    z-index: 1;
}

@media (max-width: 320px) {
    .container { width: 100%; padding-bottom: 100%; }
}

@media (min-width: 321px) and (max-width: 800px) {
    .container { width: 50%; padding-bottom: 50%; }
}

@media (min-width: 801px) {
    .container { width: 25%; padding-bottom: 25%; }
}

根据您的问题，上述圆圈的演示在这里被细分为多个部分