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:
<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