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

我一直在尝试使一些SVG数据图表具有响应性，但似乎无法在应用于元素的当前CSS“position:fixed”时做到这一点

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

理想情况下，我希望SVG在大小上可以上下缩放，同时无论浏览器大小如何，都保持在中心位置

这是一个SVG，我期待作出反应（右手边）

我创建了一个代码笔，并在SVG上只添加了一个百分比作为问题的示例

3%
#备份-3{
位置：固定；
宽度：550px；
左边距：73px；
边缘顶端：31像素；
}
.备份3个百分比{
位置：固定；
颜色：#000；
左边距：478px；
利润上限：96px；
字号：1em；
变换：旋转（6度）；
}

body{margin:0；padding:0；
}
.mydiv{
最大宽度：1800px；
宽度：100%；
位置：固定；背景：红色；高度：100px；边框：5px纯绿色；框大小：边框框；}

---

我会选择

视口单位

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

---

这是关于它的更深入的讨论

最大宽度不适用于位置：固定。这是我的选择：

`.nav{
   width: 1280px;
   position: fixed;
 }
 @media all and (max-width: 1280px) {
   .nav{
    width: 100%;
   }
 }`

---

如果您使用宽度而不使用@media 100%您的块

Hi@Shahil，您具体会将其应用于什么？Hi@roberrt，这对SVG非常有用，但当它被放大和缩小时，它会去掉周围的所有百分比，这听起来很糟糕。你能给我一把小提琴/密码笔让我玩一下吗？您可能必须将svg包含在相对div中才能使其再次工作。我刚刚尝试让小提琴工作，但由于某些原因，它根本不会显示svg-您是否可以通过实时站点上的inspect元素查看它？

`.nav{
   width: 1280px;
   position: fixed;
 }
 @media all and (max-width: 1280px) {
   .nav{
    width: 100%;
   }
 }`