Отзывчивые круги CSS

Цель:

Отзывчивые круги 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%;}
}

Вот что я до сих пор:

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

Проблемы:

В этом решении, когда содержимое добавляется в круг:

  • Форма сгибается, когда масштабируется через ее доступное дополнение.
  • Увеличивает размер радиуса.

Обновление:

Я создал для этого рабочее решение: Отзывчивые круги CSS

Ответы

Ответ 1

Решение:

http://jsfiddle.net/WTWrB/

Структура DIV:

Мы используем overflow:hidden в .x2 для выделения цветов фона в .x3 дочерних элементов.

Обратите внимание, что содержимое начинается внутри .x3

<div class="x0">
    <div class="x1">
        <div class="x2">
            <div class="x3">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x6">
                    <div class="x7">
                        dude
                    </div>
                    <div class="x8">
                        dude
                    </div>
                </div>                
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
            </div>
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>
</div>

CSS:

@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}
.x0 {
    float:left;
    width:100%;
}
.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}
.x3 {
    position: absolute;
    width: 100%;
    left: 0;
    top:0;
    font-size: 100%;
    float:left;
    height:100%;
    background-color:red;
}
/* BEG Content */
.x3 div{float:left;}
.x4,.x5,.x6 {
    width:100%;
}
.x7,.x8 {
    width:50%;
    float:left;
    height:100%;
}
.x4,.x5,.x7,.x8 {
    text-align:center;
}
.x4 {
    background-color:blue;
    height:20%;
}
.x5 {
    background-color:yellow;
    height:20%;
}
.x6 {
    height:60%;
}
.x7 {
    background-color:green;
}
.x8 {
    background-color:orange;
}
/* END Content */

Responsive CSS Circles

Ответ 2

Для этого вам не нужны @media запросы. Это моя попытка, чистый CSS:

.x1 {
    overflow:hidden;
}
.x1 .x2 {
    display:block;
    float:left;
    padding: 12.5%;
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
    position: relative;
}
.x1 .x2 span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    line-height: 1em;
    height: 1em;
    font-size: 100%;
    overflow: hidden;
}​

Fiddle

Полноэкранный

Ответ 3

Более короткий код

Это решение уменьшает размер вашего кода, но сохраняет функциональность на месте. Я сохранил оригинальный .x#, исключив .x0, .x3 и .x6, которые не были нужны. Поэтому в конечном решении вы, вероятно, перенумеровали (но я хотел, чтобы вы увидели, что было устранено).

Любая из ваших частей, "раскалывающих" круг, для которых требуется другой параметр top или left, должен иметь селектор, который соответствует или превышает селектор .x2 > div, чтобы переопределить, следовательно, у меня есть .x2 > .x7 и т.д. для некоторых из моих селекторов.

(Как отмечено в комментариях ниже, Chrome имеет проблемы с ошибкой с оригинальной методикой, которую OP опубликовал во время запуска бонуса. Это не решает, поэтому просмотрите следующее в другом браузере.)

Здесь изменена скрипка.

HTML

<div class="x1">
        <div class="x2">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x7">
                    dude
                </div>
                <div class="x8">
                    dude
                </div>
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>

CSS

.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

/* BEG Content */
.x2 > div {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
}
.x4,.x5 {
    width:100%;
    height: 20%;
}
.x2 > .x7, .x2 > .x8 {
    width:50%;
    height: 60%;
    top: 20%;
}
.x4 {
    background-color:blue;
}
.x2 > .x5 {
    background-color:yellow;
    top: 80%;
}

.x7 {
    background-color:green;
}
.x2 > .x8 {
    background-color:orange;
    left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}

РЕДАКТИРОВАТЬ: Основываясь на комментариях, кажется, что OP желает что-то более похожее на элемент управления, который эта скрипта предлагает (не работает в Chrome, OP не во время этого редактирования ответил мне, чтобы знать, является ли это желаемым типом функциональности).

Ответ 4

Я знаю, что это решение немного отличается от того, что было предложено здесь, но я все же думал, что это стоит поставить его.

Я использовал изображение в качестве маски для создания круга и воспользовался тем фактом, что когда заполнение задано в процентах, оно вычисляется на основе ширины его родительского элемента, а не высоты. Это позволило мне создать идеальный квадрат.

Демонстрация кругов пропорционально изменяя размер здесь

HTML-код

<div class="container">
    <img class="circle" src="circleImage.png">
</div>

CSS-код

.container {
    position: relative;
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #bbb;

}

.circle { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    z-index: 1;
}

@media (max-width: 320px) {
    .container { width: 100%; padding-bottom: 100%; }
}

@media (min-width: 321px) and (max-width: 800px) {
    .container { width: 50%; padding-bottom: 50%; }
}

@media (min-width: 801px) {
    .container { width: 25%; padding-bottom: 25%; }
}

Демонстрация вышеуказанных кругов, разделенных на разделы по вашему вопросу здесь