Gol:

Círculos CSS sensibles que:

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

Si la solucion esjavascriptTodaví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