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 に答える