Question

我已经搜索了这个主题一段时间了，答案可能已经摆在我面前，但我无法将它们整合在一起。我要做的是调整自定义滑块，如区域区域。

我使用bootstrap作为框架，但jQuery在这里效果最好，因为容器内的内容使用绝对定位，并且在管理面板中使用jQuerys自己的.draggable函数生成随机的top / left值。 / p>

我想尽量保持基本，我认为它需要的是一些数学。示例FIDDLE

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属性，如上/左宽度/高度，但我不知道如何在这里做数学运算，以便内容调整好浏览器调整大小。

我为视觉演示FIDDLE

做了一个快速的小提琴

我不是想在这里重新创建这个问题。这个问题很简单我不打算以任何一种特定的方式去做，但这是一种相当普遍的方式，因为我确信这在现代实践中很常见。找到答案的唯一原因对我来说很难，因为容器内的内容是绝对定位和随机的。

总结： 我想使用.resize()并对所有孩子的宽度，高度，左侧和顶部值进行一些数学计算。我不确定如何做这个数学，我怀疑它比这更复杂，但这是我正在寻找的原则。

附加说明：我是layerslider插件的忠实粉丝，他们做得非常出色。我正在尝试研究这个因为我真的喜欢将图层拖动到你想要的位置的能力，这很酷，而且基本上只需要.draggable()和数据库。我也尝试过为响应部分研究它，但是包含这个函数的jQuery是3000行代码（我不能相信有人真的写了那么多代码，我睡着了滚动扔了它大声笑）但是在某个地方他们写得很完美，如果你看看他们的演示页面，你会看到我在说什么。

更新

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 Bootstrap时，我很快在Fiddle上做了一个例子：的 http://jsfiddle.net/memel/f7eck/4/

如果这对你有用，请告诉我。干杯，即

使用jQuery响应.resize（）

1 个答案: