html - div - Círculos CSS responsivos

responsive square css

Question

Gol:

Círculos CSS sensibles que:

1. Escala con igual radio.
2. El radio se puede calcular por porcentaje.
3. El radio puede ser controlado por consultas de medios.

Si la solución es javascript , todavía necesito emular los activadores de consulta de medios. No ''necesito'' consultas de medios pero quiero la capacidad de controlar el radio por porcentaje en ciertos anchos:

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

Aquí está lo que tengo hasta ahora:

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

Problemas:

En esta solución, cuando el contenido se agrega a un círculo:

• La forma se contrae cuando se escala más allá del relleno disponible.
• Aumenta el tamaño del radio.

Actualizar:

He construido una solución de trabajo para esto aquí: Círculos CSS responsivos

Answer 1

Código más corto

Esta solución reduce el tamaño de su código pero mantiene la funcionalidad en su lugar. Mantuve el .x# original, eliminando los .x0 , .x3 y .x6 que no eran necesarios. Así que en una solución final, probablemente volverías a numerar (pero quería que vieras lo que se eliminó).

Cualquiera de sus piezas que "dividan" el círculo que requiere una configuración top o left diferente deberá tener un selector que cumpla o supere el selector .x2 > div para anular, por lo tanto, tengo por qué .x2 > .x7 etc. para algunos de mis selectores

(Como se señala en los comentarios a continuación, Chrome tiene problemas de errores con la técnica original que OP había publicado al momento de comenzar la recompensa. Esto no resuelve esos problemas, por lo que debe ver lo siguiente en otro navegador).

Aquí está el violín modificado.

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

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

EDITAR: Según los comentarios, parece que el OP deseaba algo más parecido al control que ofrece este violín (no funciona en Chrome; el OP no me respondió en el momento de esta edición para saber si ese es el tipo de funcionalidad deseada o no) ).

Answer 2

Solución:

http://jsfiddle.net/WTWrB/

La estructura DIV:

Usamos el overflow:hidden en .x2 para derramar colores de fondo en .x3 de elementos secundarios.

Observe que el contenido comienza dentro de .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>

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

Answer 3

No necesitas consultas @media para esto. Este es mi intento, puro 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

Pantalla completa

Answer 4

Sé que esta solución difiere bastante de lo que se ha sugerido aquí, pero aun así pensé que valdría la pena ponerla en práctica.

Usé una imagen como máscara para crear el círculo y aproveché el hecho de que cuando el relleno se especifica como un porcentaje, se calcula en función del ancho de su elemento principal en lugar de la altura. Esto me permitió crear un cuadrado perfecto.

Demostración de círculos redimensionando proporcionalmente here

Código HTML

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

Código 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%; }
}

Demostración de los círculos anteriores subdivididos en secciones según su pregunta here