Responsywne kręgi CSS

Cel:

Elastyczne kręgi CSS, które:

Skaluj z równym promieniem.Promień można obliczyć w procentach.Promień może być kontrolowany przez zapytania o media.

Jeśli rozwiązanie jestjavascript, Wciąż muszę emulować wyzwalacze zapytań o media. Nie potrzebuję zapytań o media, ale chcę mieć możliwość kontrolowania promienia w procentach przy pewnych szerokościach:

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

Oto, co mam do tej pory:

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

W tym rozwiązaniu, gdy treść zostanie dodana do okręgu:

Kształt wykrzywia się po przeskalowaniu poza dostępne wypełnienie.Zwiększa rozmiar promienia.Aktualizacja:

Zbudowałem dla tego rozwiązanie robocze:Responsywne kręgi CSS

questionAnswers(4)

yourAnswerToTheQuestion