是否可以使固定位置的 div 响应？

Question

我一直在尝试使一些 SVG 数据图表具有响应性，但似乎无法将当前的 CSS 'position:fixed' 应用于元素。

如果可能，我正在寻找一种不依赖媒体查询的解决方案，因为我有多个元素需要将其应用到。如果这是不可能的，那么关于在调整浏览器大小时如何使所有数据与 SVG 匹配的任何建议都会很棒！

理想情况下，我希望 SVG 可以放大和缩小大小，同时保持居中，无论浏览器的大小如何。

这是我希望做出响应的 SVG 之一（右侧） 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

我愿意 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
}

这篇文章将对此进行更深入的探讨