响应式CSS圈子

7fyelxc5 于 5个月前发布在其他

关注(0)|答案(4)|浏览(60)

目标：

响应式CSS圆圈：

1.等半径缩放。
1.半径可以按百分比计算。

Radius可通过媒体查询进行控制。

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

型

问题：

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

当缩放超过其可用的填充时，形状会变形。
增加半径的大小。

更新：

我已经在这里构建了一个可行的解决方案：响应式CSS循环

css

来源：https://stackoverflow.com/questions/12945891/responsive-css-circles

4条答案

按热度按时间

rseugnpd1#

你不需要@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;
}

字符串
Fiddle
Full Screen的

赞(0）回复(0）举报 5个月前

gwbalxhn2#

短代码

这个解决方案减少了代码大小，但保留了功能。我保留了原始的.x#，删除了不需要的.x0，.x3和.x6。所以在最终的解决方案中，您可能会重新编号（但我想让您看看删除了什么）。
任何需要不同top或left设置的“分割”圆的片段都需要一个满足或超过.x2 > div选择器的选择器来覆盖，因此我的一些选择器使用.x2 > .x7等。
(As在下面的评论中注意到，Chrome has bug issues使用了OP在赏金开始时发布的原始技术。这并不能解决这些问题，所以在另一个浏览器中查看以下内容。）

Here's the modified fiddle.

超文本标记语言

<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似乎想要更像the control this fiddle offers**的东西（在Chrome中不起作用; OP在编辑时没有回复我，让我知道这是否是所需的功能类型）。

赞(0）回复(0）举报 5个月前

xeufq47z3#

解决方案：

http://jsfiddle.net/WTWrB/

DIV结构：

我们在.x2中使用overflow:hidden来溢出子元素的.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 */

型

的数据

赞(0）回复(0）举报 5个月前

j8yoct9x4#

我知道这个解决方案与这里所建议的有很大的不同，但我仍然认为值得提出来。
我使用一个图像作为遮罩来创建圆形，并利用了这样一个事实，即当padding被指定为百分比时，它是基于其父元素的宽度而不是高度计算的。这使我能够创建一个完美的正方形。
圆的比例为1here的演示
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%; }
}

型
根据您的问题here，将上述圆圈细分为多个部分

赞(0）回复(0）举报 5个月前

我来回答

响应式CSS圈子

目标：

问题：

更新：

4条答案

短代码

Here's the modified fiddle.

解决方案：

相关问题

热门标签

最新问答