响应CSS圈子 [英] Responsive CSS Circles

问题描述

目标：

响应式CSS圈子：

1. 缩放半径相等。


2. 半径可以按百分比计算。


3. 半径可以通过媒体查询控制。
   

---

如果解决方案是 javascript ，我还是需要模拟媒体查询触发器。我不需要媒体查询，但我确实希望能够以一定的宽度百分比控制半径：

  @media（max-width：320px）
 {
 .x2 {padding：50％;} 
} 
 
 @media（min-width：321px）和（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％; //目前用于控制半径。 
 width：auto; 
 height：auto; 
 border-radius：50％; 
 -moz-border-radius：50％; 
 -webkit-border-radius：50％; 
 -khtml-border-radius：50％; 
 background：#eee; 
 text-align：center; 
} 
  

问题：

在此解决方案中，当内容添加到圈子时：

---

$ b b

更新：

我已经为此建立了一个工作解决方案：
响应CSS圆圈

解决方案

解决方案： h2>

http://jsfiddle.net/WTWrB/

DIV结构：

我们使用<$ c $在 .x3 $中溢出背景颜色的 overflow：hidden

请注意，内容在 .x3

 < div class =x0> 
< div class =x1> 
< div class =x2> 
< div class =x3> 
<！ -  BEG内容 - > 
< 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内容 - > 
< / div> 
< / div> 
< div class =x2>< / div> 
< div class =x2>< / div> 
< div class =x2>< / div> 
< / div> 
< / div> 
   
 
 
 
  CSS ：
  @media（max-width：320px）
 {
 .x2 {padding：50％;} 
} 
 b $ b @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 * / 
  
  
 
Goal:

Responsive CSS circles that:

Scale with equal radius.
Radius can be calculated by percent.
Radius can be controlled by media queries.




If solution is javascript, I still need to emulate media query triggers. I dont 'need' media queries but I do want the ability to control the radius by percentage at certain widths:
@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%;}
}
Here is what I have so far:

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


Problems:

In this solution, when content is added to a circle:


The shape contorts when scaled past it's available padding.
Increases the size of the radius.




Update:

I've built a working solution for this here: 
Responsive CSS Circles
解决方案
Solution:

http://jsfiddle.net/WTWrB/

The DIV structure:

We use overflow:hidden in .x2 for spill off background colors in .x3
   of child elements.

Notice the content starts inside of .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>
The 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 */


                        
这篇关于响应CSS圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！