jquery - ブラウザのビューポートが 1200px 未満の場合、css 値 (左: x) を変更します

Question

幅が 1200px の Web ページでコンテンツをラップしています。ラップ div は、この css を使用してページの中央に配置されposition:absolute; top:0px; left:50%; margin-left:-600px; width:1200px; height:auto; ます。ブラウザー ビューポートの幅が 1200px 未満の場合、jQuery を使用して左の値を 50% から 0px に変更する必要があります。たとえば、現在 iPod では、ラップが中央に配置されているため、左側のコンテンツが切り取られ、横にスクロールする方法がありません。前もって感謝します。

Answer 1

これがフィドルリンクです。サイズ変更可能なペインをドラッグして、ウィンドウのサイズを変更します。

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

Answer 2

この手法を使用して要素を中央に配置する理由はありますか？それを行うためのはるかに簡単な方法は、より狭い幅でうまく機能するでしょうが、絶対的なポジショニングと負のマージンがないことです！

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