javascript - 将 div 的大小调整为自动，然后在调整窗口大小时将其调整为彼此相同的高度？

Question

我想调整三列 div 的大小，使它们的长度都相同。我已经能够通过执行以下函数在页面加载时执行此操作(我在 SO 上找到了它，但不幸的是我现在无法找到它来提供归因，如果我能找到它会更新):

function resizeIt()
{   
var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}

这很好用，但我还希望每次调整窗口大小时调整 div 的大小。所以我修改了函数，然后在每次窗口调整大小时调用它，然后在页面加载时调用函数。这是修改后的函数(函数的第一行是加法)加上调整窗口大小的函数调用:

function resizeIt()
{
$(".feature").css({"height: auto"});

var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}
resizeIt();   

$(window).resize(function(){
resizeIt();
});

现在我的 div 在页面加载或页面调整大小时无法正确调整大小。什么都没有发生。如果我在我的函数中放置某种警报，它不会在

$(".feature").css({"height: auto"});

行包含在函数中。为什么这一行会破坏我的代码？当我在第一行调用它时，该对象确实存在，因此它不是空对象。

Answer 1

为什么不尝试使用媒体查询调整大小？这将允许 div 在窗口调整大小时调整大小而无需重新加载页面

@media (max-width: 1200px) {
.feature {
/*new height value*/
/*new width value*/
}
}
@media (max-width: 767px) {
.feature {
/*new height value*/
/*new width value*/
}
}