Javascript 无法根据视口宽度动态调整div元素的大小

我试图做出一个响应性强的设计，在这个设计中我有一个d3.js条形图。条的宽度与视口的宽度相对应。如果该条为1/5，则为视口宽度的20%，依此类推。我试图动态地调整它们的大小，这在某种程度上是可以做到的，但是代码的行为与我试图获得的非常不同。由于所有的div都是不同的宽度，我想我应该用类条形图遍历每个div，并通过将new viewport/old viewport的比率乘以它的旧宽度来给它一个新的宽度

这是我的密码：

var docFifth = ($(".row").width())/5;
var fullWidth = docFifth*5; //this is the full width of the viewport
$(window).resize(function(){
   var newSize = $(".row").width();
   var percentage = (newSize / fullWidth).toFixed(2);
   $(".bar-class").each(function(){
     $(this).width($(this).width() * percentage);
   })
});

---

这里怎么了？起初它几乎可以工作，但后来指数级变得太小了。提前感谢。

为什么不使用媒体查询？似乎比您在此处手动执行的操作更容易。我不认为这会像我所说的那个样精细。我不确定你们所说的“精细”是什么意思，但媒体查询是使网站具有响应性的最流行和最简单的方法之一。我的意思是，我宁愿一个像素一个像素地调整它的大小，就像我更改视口宽度时其他网站的大小一样。我必须每25个像素放置一次媒体查询来保持这种行为，不是吗？看看这些例子。。您可以指定希望类更改的屏幕大小，这很简单：