Html 响应性CSS圈 目标：

响应性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 */

等半径缩放

半径可以按百分比计算

半径可以由媒体查询控制

---

如果解决方案是javascript，我仍然需要模拟媒体查询触发器。我不“需要”媒体查询，但我确实希望能够在特定宽度下按百分比控制半径：

以下是我目前掌握的情况：

@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 */

哈哈，伙计
.x1
{
浮动：左；
宽度：100%；
}
.x2
{
显示：块；
浮动：左；
填充：12.5%；//当前用于控制半径。
宽度：自动；
高度：自动；
边界半径：50%；
-moz边界半径：50%；
-webkit边界半径：50%；
-khtml边界半径：50%；
背景：#eee；
文本对齐：居中；
}

问题： 在此解决方案中，当内容添加到圆中时：

@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 */

• 当缩放超过可用填充时，形状会扭曲
• 增加半径的大小

---

更新： 我在这里构建了一个有效的解决方案：

---

您不需要为此进行

@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;
}​

较短的代码 此解决方案减少了代码大小，但保留了功能。我保留了原来的

.x#

，删除了不需要的

.x0

、

.x3

和

.x6

。所以在最终的解决方案中，您可能会重新编号（但我想让您看看被删除的内容）

您的任何作品“分割”需要不同的

top

或

left

设置的圆圈都需要一个符合或超过

.x2>div

选择器的选择器来覆盖，因此我为我的一些选择器设置了

.x2>.x7

等

（如下面的评论所述，在赏金开始时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>

---

编辑：根据评论，OP似乎更像（在Chrome中不起作用；OP在编辑时没有回答我是否需要这种功能）.

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

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

按比例调整圆大小的演示

HTML代码

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

根据您的问题将上述圆圈分为几个部分进行演示

解决方案：

DIV结构：

@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 */

我们在

.x2

中使用

overflow:hidden

作为

.x3

中的溢出背景色 子元素的类型

请注意，内容从

.x3

---

您列出的问题是由

width:auto；高度：自动。固定尺寸是否可以接受？可能使用相对单位？仅使用CSS是很困难的，因为宽度和高度需要相同，而且由于它是响应性的，所以您无法判断。@bfavaretto需要的是，半径或直径可以通过与示例类似的百分比计算。@Cooperista我不反对使用javascript，但是我们仍然需要记住媒体查询触发器。@PraveenKumar我不“需要”它们哈哈，但我确实希望能够在一定宽度下按百分比控制半径。即使解决方案使用javascript，这当然解决了溢出问题。我想我会期望圆圈堆叠25%填充（2行）和50%填充（4行）。这个解决方案可能吗？是的，要做到这一点，我们需要使用媒体查询希望这能为我所需要的灵活性提供更好的背景。我对这段代码做了几次修改，并尽可能地缩小了它。我添加了几个属性，以允许子内容容器元素具有更大的灵活性。请参阅上面的编辑。您的解决方案实际上只解决了一半的问题。尽管它受到了很多关注，但这并不意味着当人们试图在JSFIDLE之外使用它时，它实际上是可移植的。我多次要求你修改你的答案以适应赏金，而你从未修改过。啊，是的，我说得不对
.x2
div堆叠良好。您还消除了
.x3
…这很好。我的意思是，在
.x2
子元素中使用覆盖来应用样式是不可取的。@DanKanze——您希望在这些圈中的“布局”中有多大的灵活性和标准化？它们都一样吗？每一个都不同？你的目标是“改进”和“缩小”。我的代码变小了，但什么是“改进的”？这在很大程度上取决于您想要什么功能。从开发人员的角度来看，理想的解决方案应该是易于构建的解决方案（在
.x2
块中无覆盖地推出样式）并优化任意代码（修剪fat，如
.x3
仅用作辅助类，以适应
.x2
中的构建灵活性）. 理想的解决方案是使用一个类，使开发人员能够像使用块一样使用
.x2
，并包含它们。@DanKanze--您看过Chrome中最初的fiddle解决方案吗？它无法隐藏溢出，因为@DanKanze--（查看Firefox或IE9+中的内容，请参阅上面的注释）中指出的错误，它通过内容包装器上的
布局
类控制内容。这就是你所说的吗？当然，它的尺寸不一定“更小”，但t
@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 */