Tor:

Responsive CSS-Kreise, die:

Mit gleichem Radius skalieren.Der Radius kann in Prozent berechnet werden.Der Radius kann durch Medienabfragen gesteuert werden.

Wenn die Lösung istJavascriptIch muss noch Medienabfrage-Trigger emulieren. Ich benötige keine Medienabfragen, möchte aber die Möglichkeit haben, den Radius in bestimmten Breiten prozentual zu steuern:

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

Folgendes habe ich bisher:

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

Probleme:

Wenn in dieser Lösung Inhalt zu einem Kreis hinzugefügt wird, gilt Folgendes:

Die Form verzieht sich, wenn sie über den verfügbaren Abstand hinaus skaliert wird.Vergrößert den Radius.Aktualisieren:

Ich habe hier eine funktionierende Lösung dafür entwickelt:Responsive CSS-Kreise