Цель:
Отзывчивые круги CSS, которые:
- Масштаб с равным радиусом.
- Радиус можно рассчитать на проценты.
- Радиус может управляться медиа-запросами.
Если решение javascript, мне все равно нужно эмулировать триггеры медиа-запросов. Мне не нужны "медиа-запросы", но я хочу, чтобы возможность управлять радиусом в процентах при определенных ширинах:
@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%;}
}
Вот что я до сих пор:
<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;
}
Проблемы:
В этом решении, когда содержимое добавляется в круг:
- Форма сгибается, когда масштабируется через ее доступное дополнение.
- Увеличивает размер радиуса.
Обновление:
Я создал для этого рабочее решение: Отзывчивые круги CSS