响应式 CSS 圆圈
[英] Responsive CSS Circles
本文介绍了响应式 CSS 圆圈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目标:
响应式 CSS 圆圈:
- 等半径缩放.
- 半径可以按百分比计算.
- 半径可以通过媒体查询进行控制.
<小时>
如果解决方案是javascript，我仍然需要模拟媒体查询触发器.我不需要媒体查询"，但我确实希望能够在某些宽度下按百分比控制半径:
@media (max-width : 320px){.x2{填充:50%;}}@media (min-width : 321px) 和 (max-width : 800px){.x2{填充:25%;}}@media(最小宽度:801px){.x2{填充:12.5%;}}
这是我目前所拥有的:
http://jsfiddle.net/QmPhb/
<div class="x2">哈哈 伙计
<div class="x2"></div><div class="x2"></div><div class="x2"></div>
.x1{向左飘浮;宽度:100%；}.x2{显示:块；向左飘浮;填充:12.5%；//当前用于控制半径.宽度:自动；高度:自动；边界半径:50%；-moz-border-radius:50%;-webkit-border-radius:50%;-khtml-border-radius: 50%;背景:#eee;文字对齐:居中；}
问题:
在这个解决方案中，当内容被添加到一个圆圈时:
- 当缩放超过可用填充时，形状会扭曲.
- 增加半径的大小.
<小时>
更新:
我在这里为此构建了一个可行的解决方案:响应式 CSS 圆圈
解决方案
解决方案:
http://jsfiddle.net/WTWrB/
DIV 结构:
我们在 .x2 中使用 overflow:hidden 来溢出 .x3 中的背景颜色子元素.
注意内容开始于 .x3
<div class="x1"><div class="x2"><div class="x3"><!-- BEG 内容--><div class="x4">伙计
<div class="x6"><div class="x7">伙计
<div class="x8">伙计
<div class="x5">伙计
<!-- 内容结束-->
<div class="x2"></div><div class="x2"></div><div class="x2"></div>
CSS:
@media (最大宽度:320px){.x2 {填充:50%;}}@media (min-width: 321px) 和 (max-width: 800px){.x2 {填充:25%；}}@media(最小宽度:801px){.x1 {宽度:800px}.x2 {填充:12.5%;}}.x0 {向左飘浮;宽度:100%；}.x1 {边距:0px 自动；}.x2 {溢出:隐藏；显示:块；向左飘浮;宽度:自动；高度:自动；位置:相对；边界半径:50%；-moz-border-radius:50%;-webkit-border-radius:50%;-khtml-border-radius: 50%;背景:#eee;}.x3 {位置:绝对；宽度:100%；左:0；顶部:0；字体大小:100%；向左飘浮;高度:100%；背景颜色:红色；}/* BEG 内容 */.x3 div{浮动:左；}.x4,.x5,.x6 {宽度:100%；}.x7,.x8 {宽度:50%；向左飘浮;高度:100%；}.x4,.x5,.x7,.x8 {文字对齐:居中；}.x4 {背景颜色:蓝色；高度:20%；}.x5 {背景颜色:黄色；高度:20%；}.x6 {高度:60%；}.x7 {背景颜色:绿色；}.x8 {背景颜色:橙色；}/* 结束内容 */
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屋！
查看全文
