使用jQuery响应.resize()

Question

我搜索这个话题已经有一段时间了，答案可能已经摆在我面前了，但我没能把所有的东西都放在一起。我要做的是调整一个自定义滑块的大小，如截面面积。

我使用引导作为一个框架，但是jQuery在这里工作得最好，因为容器中的内容使用绝对定位，并且具有在管理面板中生成的具有jQuerys非常自己的.draggable函数的随机上/左值。

我想让它尽可能的基本，我想它所需要的只是一些数学。示例小提琴

var h = $(window).height();
var w = $(window).width();
var static_h = $('.static-area').height();

    if((h/w) > 800) {
        $('#main').css({'margin-top': w/1.2});
    }
    else { 
        $('#main').css({'margin-top': w/1.2, 'width':w});
        $('.static-area div').css({'width': w/2, 'left':0});  
    } 

这类方法可以工作，我可以分割所有css属性，比如顶部/左边的宽度/高度，但是我不知道在这里如何计算，这样内容就可以随着浏览器的大小调整得很好。

我为一个可视化演示小提琴做了一个快速的小提琴

我不是要在这里重新创造轮子这个问题是直截了当的，我并不是想用任何一种特定的方式去做，而是一种相当普遍的方式，因为我确信这在现代实践中是相当普遍的。对我来说，找到答案的唯一原因是因为容器中的内容是绝对定位的和随机的。

总结道：，我想使用.resize()，并对所有孩子的宽度、身高、左边和最高值做一些计算。我不知道如何做这个数学，我怀疑它比这复杂一点，但这是我正在寻找的原则。

附加说明：我是分层滑块插件的超级粉丝，他们做得很棒。我正试图研究这个问题，因为我非常喜欢将层拖到您想要的位置的能力，这很酷，基本上只需要.draggable()和一个数据库。我也试着研究它的响应部分，但是包含这个函数的jQuery是3000行代码(我不敢相信有人真的写了这么多代码，我就睡着了，滚动着扔出了lol)，但是在某个地方，他们完美地写了这个，如果你看看他们的演示页面，你就会看到我在说什么。

更新：

var w = $(window).width();

    if((w) > 800) {
        //Figuring out what to do lol, but nothing for now
    }
    else { 
        // Doing this when window is under 800px
        $('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w}); 
    }

这有点像我想要的那样，当然我需要添加一些东西，但是也许有人能帮我写一些更高级的东西？

上面的代码所做的是改变我的元素的左边和宽度，因为浏览器通过将窗口宽度降低2来调整大小，我模糊地看到了为什么这样做，但我无法完全理解它--我讨厌数学。

Answer 1

我不太明白你的问题。您必须计算要调整大小的元素的比率，并将其应用于其子元素。

ratio = newWidth / currentWidth;

当您使用Twitter引导时，我很快在Fiddle上做了一个示例：http://jsfiddle.net/memel/f7eck/4/

如果这件事对你有用，请告诉我。干杯，E.