1

在我的模板中，我想#wrapper使用 jQuery 动态设置容器宽度，因此对于任何屏幕分辨率，#wrapper宽度都是screen width - 200.

var _width= ($(window).width() - 200) 
$("#wrapper").css("width",_width);

设置此值后，我想在窗口重新大小时动态更改宽度。我使用以下 jQuery：

$(window).bind('resize', function() {
    var _width_prcnt = (($(window).width()- (200)/($(window).width()/100) );
    $('#wrapper').stop(false,true).animate({
        'width':_width_prcnt+ '%'
    });
});

我认为这不能正常工作。我如何使用if-else语句来设置一次宽度，并且只有在窗口重新调整大小时才能为宽度设置动画？

4

3 回答 3

2

您应该仅使用 css 调整窗口大小。带有：200px 的窗口很容易使用margin.

#wrapper{
min-width:500px;
margin:0 100px;
}

这也是居中的。

于 2013-04-10T06:49:49.710 回答
1

您可以使用 CSS3calc()来实现这一点（doc）：

#wrapper{
    width:calc(100% - 200px);
    margin: 0 100px; //If you want the content centered
}

作为#wrapper宽度是窗口宽度的元素的直接子元素。

请参阅caniuse.com 上的此图表以了解浏览器兼容性，并查看此小提琴以获取工作示例。

于 2013-04-10T06:47:36.193 回答
1

jQuery .resize() 应该可以工作，几分钟前我刚刚在将 CSS 纵横比设置为宽度的倒数时回答了另一个问题？. 检查我的答案+链接的小提琴，看看它是否为您提供了您正在寻找的功能。让我知道我的答案是否适合您，或者让我知道 .resize() 不适合的原因，我会尝试给出更好的答案。

于 2013-04-10T07:03:39.067 回答