Question

我一直试图让一些SVG数据图表响应，但似乎无法使用当前CSS的“position：fixed”应用于元素。

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

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

这是我希望做出响应的SVG之一（右侧） http://datahealthcheck.databarracks.com/2016/#backup-section-3

我创建了一个codepen，只在SVG中添加了一个百分比作为问题的示例http://codepen.io/anon/pen/YGvXkq

return wrapper

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
}

这个article对此更加深入

Answer 2

＆＃13;

protected $appends = ['route'];

＆＃13;

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

＆＃13;

我认为媒体查询是使div响应的最佳方法。

如果不是，您可以将<div class="mydiv"> </div>和with:100%用于固定位置

Answer 3

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

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

如果你在没有@media 的情况下使用宽度 100% 你的块

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

3 个答案: