Как оставаться пропорциональным в отзывчивом дизайне?

Code at jsfiddle Как оставаться пропорциональным в отзывчивом дизайне?

У меня есть несколько кругов, содержащихся в контейнере div. Я использую проценты, так как хочу, чтобы круги оставались отзывчивыми и увеличивались в зависимости от размера экрана. Я также хочу, чтобы эти круги оставались кругами и не становились овалами, как в настоящее время, когда я изменяю размер окна. Очевидно, из-за того, что ширина и высота экранов редко равны, и поскольку я выбираю процентные высоты и ширину, это именно то, что я должен получить.

Однако, как я могу получить отзывчивые круги, которые остаются кружками на разных размерах экрана?

.circle { 
    margin: 5%; 
    display: inline-block; 
    width: 30%; 
    height: 30%; 
    background: #000; 
    border-radius: 50%; 
    position: relative; 
}

источник

2013-12-03 Tomatoes

@codehorse спасибо за комментарий, но это не сработает, так как мы больше не реагируем, поскольку мы используем пиксели. См. Проблему здесь http://jsfiddle.net/NTb7q/1/ – Tomatoes

, кроме того, они являются кругами из-за радиуса границы. Если я изменю граничный радиус, я получу другие фигуры, но не круги, и я хочу круги на всех размерах экрана. – Tomatoes

Попробуйте альтернативное решение: http://stackoverflow.com/questions/12945891/responsive-css-circles/14013200#14013200 – RichTea

Обновлена ваша скрипка для non js soln. - http://jsfiddle.net/D6pjd/23/

В основном модифицированный HTML, как это (Показаны только часть) -

<div class="circles"> 
    <div class="circle-container"> 
     <div class="dummy"></div> 
     <div class="circle"> 
     <span class="circle1"></span> 
     </div> 
    </div> 
... 
... 
</div>

и изменения в CSS -

.circle-container { 
    margin: 20px; 
    display: inline-block; 
    position: relative; 
    width: 30%;  
} 

.dummy { 
    padding-top: 100%; 
} 

.circle { 
    margin: 5%; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background: #000; 
    border-radius: 50%; 
}

Исходя из этого - Height equal to dynamic width (CSS fluid layout)

EDIT: Обновлена скрипка, чтобы сохранить только два круга подряд

источник

2013-12-03 11:04:56

с этим решением вы получите 3 круга , –

Обновлено, чтобы держать только два круга подряд –

Отклик на основании this post

Вам необходимо сделать контейнер для каждого круга с соотношением сторон 1: 1. благодаря Натан Райан, который указал на это решение css. Он дает решение для формата 4: 3, но для вашей проблемы вам нужно соотношение сторон 1: 1. Именно поэтому вам нужно изменить margin-top:75%; к margin-top:100%; для вас контейнер .circle

Fiddle

HTML:

<div class="circles"> 
     <div class="circle_container"> 
      <div class="circle"> 
      <span class="circle1"></span> 
      </div> 
     </div> 
     <div class="circle_container"> 
      <div class="circle"> 
      <span class="circle2"></span> 
      </div> 
     </div> 
     <div class="circle_container"> 
      <div class="circle"> 
      <span class="circle3"></span> 
      </div> 
     </div>  
     <div class="circle_container"> 
     <div class="circle"> 
      <span class="circle4"></span> 
      </div> 
     </div> 
     <div class="circle_container"> 
      <div class="circle"> 
      <span class="circle5"></span> 
      </div> 
     </div> 
     <div class="circle_container"> 
      <div class="circle"> 
      <span class="circle6"></span> 
      </div> 
     </div> 
</div>

CSS:

html, body { 
    background: pink; 
    font-family: 'Helvetica Neue' sans-serif; 
    font-size:100%; 
} 
.circle_container{ 
    float:left; 
    position: relative; 
    width: 30%; 
    margin:10%; 
} 
.circle { 
    margin-top: 100% 
} 

.circle1, .circle2,.circle3,.circle4,.circle5,.circle6 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: #000; 
    border-radius: 50%; 
}

Установка вашего контейнера float:left; вместо display:inline-block избежит «белых пробелов» между вашими кругами, и вы будете иметь полный контроль над шириной и полями ваших кругов.

источник

2013-12-03 11:12:34

Как оставаться пропорциональным в отзывчивом дизайне?

ответ

Смежные вопросы