0

現時点では、レスポンシブ Web サイト (Skeleton レスポンシブ グリッドを使用) である小さなプロジェクトがあります。jQuery を使用して、コンテンツをビューポートの垂直方向の中央に配置しています。

<script>
$(document).ready(function(){                  
 $(window).resize(function(){
  $('.container').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.container').outerWidth())/2,
   top: ($(window).height() 
     - $('.container').outerHeight())/2
 });    
 });
 // To initially run the function:
 $(window).resize(); 
});
</script>

問題は、ビューポートがコンテナーの外側の幅よりも小さくなると、依然として絶対位置が適用されることです。

理想的には、私は言う何かが必要です

ビューポートが .container の外側の幅と同じか小さい場合は、配置を適用しませんが、ビューポートが .container よりも大きい場合は、絶対配置を適用してビュー ポートの中央に配置しますか?

頭を悩ませているので、Jqueryでこれを実現する方法を知っている人はいますか?

編集 >>>>>

このようなことが正しいでしょうか、私はここでストローを握りしめているようなものです.....

$(document).ready(function(){
$(window).width();   // returns width of browser viewport
 $(document).width(); // returns width of HTML document

$(window).height();   // returns heightof browser viewport
$(document).height(); // returns height of HTML document

var width = $(window).width(); 
var height = $(window).height(); 

   if ((width >= 1024  ) && (height>=768)) {
 $(window).resize(function(){
  $('.container').css({
  position:'absolute',
  left: ($(window).width() 
 - $('.container').outerWidth())/2,
 top: ($(window).height() 
 - $('.container').outerHeight())/2
 });    
 });
 // To initially run the function:
 $(window).resize(); 
}
else {
//do nothing
}
});
4

2 に答える 2

1 
<script>
 $(document).ready(function(){                  
     $(window).resize(function(){
          // Here is the new part:
          if(($(window).width() > $('.container').outerWidth()) && ($(window).height() > $('.container').outerHeight()) ){
             $('.container').css({
                  position:'absolute',
                  left: ($(window).width() 
                     - $('.container').outerWidth())/2,
                  top: ($(window).height() 
                     - $('.container').outerHeight())/2
             });
          }else{
             $('.container').css({position:'relative'});
          }    

     });
     // To initially run the function:
     $(window).resize(); 
 });
</script>

それが役に立てば幸い。コンテナの幅と高さの両方がウィンドウビューポートよりも小さい場合は絶対位置が適用され、そうでない場合は相対（通常）位置が適用されます。

于 2013-02-22T14:26:36.630 に答える
1

$(window).width(); // returns width of browser viewport または $(document).width(); // returns width of HTML document と組み合わせて使用 ​​する必要があります$('.container').width()

if (width comparison) apply_formatting

于 2013-02-22T13:53:11.627 に答える