Objetivo:

Círculos CSS responsivos que:

Escala com raio igual.O raio pode ser calculado por porcentagem.O raio pode ser controlado por consultas de mídia.

Se a solução éjavascriptAinda preciso emular triggers de consulta de mídia. Eu não preciso de consultas de mídia, mas eu quero a capacidade de controlar o raio por porcentagem em certas larguras:

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

Aqui está o que eu tenho até agora:

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:

Nesta solução, quando o conteúdo é adicionado a um círculo:

A forma se contorce quando dimensionada além do preenchimento disponível.Aumenta o tamanho do raio.Atualizar:

Eu criei uma solução de trabalho para isso aqui:Círculos CSS responsivos