jQuery，響應式設計：如何根據窗口大小更改課程

Question

我創建了響應式magento主題，但遇到了問題。在正常窗口大小的情況下，我的菜單位置與ipad/mobile大小不同。我想知道是否有一個jQuery命令，允許您刪除基於窗口大小的類/ div，任何幫助，將不勝感激。

這下面是我試過，但沒有奏效：

jQuery(window).resize(function() { 
     var $j = jQuery; 
     var windowwidth = $j(window).width(); 

     $j(windowwidth).onChange(function(){ 
      if (windowwidth < '148') { 
       $j('.parent').css('display','relative'); 
      } 
     }); 
    } 

無法得到的建議下面的CSS3方法jQuery的工作完美。 @media screen and（max-width：960px）{}

Answer 1

您不能將一個事件偵聽器放在一個數字上（windowwidth）。您只需要將該值與resize事件處理程序中的所需值進行比較。

resize處理程序將在每次窗口的寬度或高度改變時觸發。

您的代碼應該是這樣的：

$(window).resize(function() { 
    if ($(window).width() < 148) { 
     $('.parent').css('display','relative'); 
    } 
} 

你也應該考慮使用CSS Media Queries，而不是JS這一點。

Answer 2

我建議看這個類型的工作jRespond jQuery庫。

https://github.com/ten1seven/jRespond

例如：

var jRes = jRespond([ 
     { 
      label: 'small', 
      enter: 0, 
      exit: 1000 
     },{ 
      label: 'desktop', 
      enter: 1001, 
      exit: 10000 
     } 
    ]); 


    jRes.addFunc({ 
     breakpoint: 'small', 
     enter: function() { 
      $('#sidebarbg,#sidebar,#content').removeClass('hided'); 
     }, 
     exit: function() { 
      $('.collapseBtn.top.hide').removeClass('top hide'); 
     } 
    }); 

其結合事件所定義的窗口大小來觸發編寫的函數。

Answer 3

你可以做到這一點dcro說，與調整大小事件處理程序和WINDOWWIDTH，或者你也可以通過創建類似這樣的

@media screen and (max-width: 960px) {} 

源的條件下做到這一點與@media CSS標籤：http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

的@media標籤可能無法雖然

Answer 4

老的瀏覽器上工作，這工作雖然：

$(window).resize(function() { 

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

    if (windowwidth < '148') { 
     $('.parent').css('display','relative'); 
     alert('see it works'); 
    } 

});