Html 响应式 CSS 圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12945891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive CSS Circles
提问by Dan Kanze
Goal:
目标：
Responsive CSS circles that:
响应式 CSS 圆圈：
- 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:
如果解决方案是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%;}
}
Here is what I have so far:
这是我到目前为止所拥有的：
<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
我在这里为此构建了一个可行的解决方案： 响应式 CSS 圆圈
采纳答案by Dan Kanze
Solution:
解决方案：
The DIV structure:
DIV结构：
We use overflow:hiddenin .x2for spill off background colors in .x3of child elements.
我们使用overflow:hiddenin.x2溢出.x3子元素的背景颜色。
Notice the content starts inside of .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>
The 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 */
回答by Praveen Kumar Purushothaman
You don't need @mediaqueries for this. This is my try, pure CSS:
您不需要对此进行@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;
}?
回答by ScottS
Shorter Code
较短的代码
This solution reduces your code size but keeps the functionality in place. I've kept the original .x#, eliminating the .x0, .x3, and .x6that were not needed. So in a final solution, you would probably renumber (but I wanted you to see what was eliminated).
此解决方案减少了您的代码大小，但保留了功能。我已经把原来的.x#，消除了.x0，.x3和.x6那些没有必要的。因此，在最终解决方案中，您可能会重新编号（但我想让您看看哪些被淘汰了）。
Any of your pieces "splitting" the circle that require a different topor leftsetting will need to have a selector that meets or exceeds the .x2 > divselector to override, hence why I have .x2 > .x7etc. for some of my selectors.
你的任何部分“分裂”需要不同top或left设置的圆圈都需要有一个选择器满足或超过.x2 > div选择器来覆盖，因此为什么我.x2 > .x7的一些选择器有等。
(As noted in the comments below, Chrome has bug issueswith the original technique the OP had posted at the time of the bounty starting. This does not solve those, so view the following in another browser.)
（正如下面的评论中所指出的，Chrome在赏金开始时 OP 发布的原始技术存在错误问题。这不能解决这些问题，因此请在另一个浏览器中查看以下内容。）
Here's the modified fiddle.
这是修改后的小提琴。
HTML
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
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%;}
}
EDIT:Based on comments, it appears the OP desired something more like the control this fiddle offers(not functional in Chrome; the OP has not at the time of this edit replied for me to know if that is the type of functionality desired or not).
编辑：根据评论，看来 OP 需要更像此小提琴提供的控件的东西（在 Chrome 中不起作用；在此编辑时 OP 还没有回复我，以了解这是否是所需的功能类型）。
回答by Bruno
I know this solution differs quite a bit from what has been suggested here but I still thought it would be worth putting it up.
我知道此解决方案与此处建议的解决方案有很大不同，但我仍然认为值得提出。
I used an image as a mask to create the circle and took advantage of the fact that when padding is specified as a percentage it is calculated based on the width of its parent element rather than the height. This enabled me to create a perfect square.
我使用图像作为蒙版来创建圆，并利用了这样一个事实，即当填充指定为百分比时，它是根据其父元素的宽度而不是高度来计算的。这使我能够创建一个完美的正方形。
Demonstration of circles proportionally resizing here
在此处按比例调整圆圈大小的演示
HTML code
HTML代码
<div class="container">
<img class="circle" src="circleImage.png">
</div>
CSS code
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%; }
}
Demonstration of the above circles sub-divided into sections as per your question here
根据您在此处提出的问题，上述圆圈的演示细分为多个部分
