ブラウザのビューポートが<1200pxの場合はCSS値を変更します（左：x）

Question

幅1200pxのウェブページにコンテンツを囲んでいます。 wrap divはこのCSSでページの中央に配置されていますposition:absolute; top:0px; left:50%; margin-left:-600px; width:1200px; height:auto; ブラウザのビューポートの幅が1200pxより小さい場合、jQueryを使用して左の値を50％から0pxに変更する必要があります。ラップが中央に配置されているため、例えばipod上では、左側のコンテンツは切り取られずに横方向にスクロールされます。 ありがとうございます。

Answer 1

このテクニックを使用して要素をセンタリングする理由はありますか？これを行うもっと簡単な方法は、より小さな幅でうまく動作するでしょう。絶対的な位置決めと負のマージンがないでしょう！

div#container { 
    width: 1200px; 
    margin: 0px auto; 
} 

Answer 2

Here is a fiddle link。サイズ変更可能な枠をドラッグしてウィンドウのサイズを変更します。

$(window).bind('resize', function(){ 
    if($(this).width() < 1200) 
     $('div.wrap').css('left', 0); 
    else 
     $('div.wrap').css('left', '50%'); 
}).resize();