Можно ли сделать фиксированную позицию div отзывчивой?

Question

Я пытаюсь сделать некоторые диаграммы данных SVG отзывчивыми, но, похоже, не может этого сделать с текущей позицией CSS: fixed ', применяемой к элементам.

Я ищу, по возможности, решение, которое не зависит от медиа-запросов, поскольку у меня есть несколько элементов, к которым я должен применить это. Если это невозможно, то любые предложения о том, что делать, чтобы сохранить все данные, сопоставленные с SVG в качестве браузера, будут изменены, было бы здорово!

В идеале я хотел бы, чтобы SVG масштабировался вверх и вниз по размеру, оставаясь центральным, независимо от размера браузера.

Это один из SVGs, что я ищу, чтобы реагировать (правая сторона) http://datahealthcheck.databarracks.com/2016/#backup-section-3

Я создал codepen и добавил только один процент на SVG в качестве примера проблемы http://codepen.io/anon/pen/YGvXkq

<div id="Backup-3"></div> 
<p id="percentage" class="backup3-percentage">3%</p> 

#Backup-3 { 
    position: fixed; 
    width: 550px; 
    margin-left: 73px; 
    margin-top: 31px; 
} 

.backup3-percentage { 
    position: fixed; 
    color: #000; 
    margin-left: 478px; 
    margin-top: 96px; 
    font-size: 1em; 
    transform: rotate(6deg); 
} 

Answer 1

body{ margin:0; padding:0; 
 
    } 
 
.mydiv { 
 
    max-width:1800px; 
 
    width:100%; 
 
    position:fixed; background:red; height:100px; border:5px solid green; box-sizing: border-box;}

<div class="mydiv"> 
 
</div>

I тонкий k медиа-запросов было бы лучшим подходом для того, чтобы сделать div отзывчивым.

Если вы не можете использовать with:100% и max-width к вашей позиции фиксированной DIV

Answer 2

Я бы с viewport units

.responsive-div { 
    position: fixed; 
    width: 70vw; // vw being viewport-width, so 70% of the width of the viewport 
    height: 50vh; // vh being viewport-height, so 50% of the height of the viewport 
} 

Это article будет более углубленные об этом устройстве